:root{
    transition: all 0.3s ease-in-out;
}

.blog-title-container{
  margin-top: var(--header-margin);
  padding: 0rem 1rem 1rem 1rem;
}

.blog-page-container{
  display: flex;
  flex-wrap: wrap;
  padding: 0rem 1rem 1rem 1rem;
  align-items: center;
  justify-content: space-around;

  @media screen and (max-width: 1095px){
    justify-content: center;
  }

  a {
    text-decoration: none;
    color: black;
    display: flex;
    justify-content: center;
  }

  a:visited{
    color: black;
  }

}

p{
  font-size: x-large;
}

.article-container{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: var(--azure-web);
  border-radius: var(--corners);
  box-shadow: 2px 2px 4px lightgray;
  max-width: 500px;
  margin-bottom: 2rem;
  
  transition: background-color 0.3s ease;

  @media screen and (max-width: 1095px){
    max-width: max-content;
    width: 80%;
  }

  @media screen and (max-width: 753px){
    width: 90%;
  }

  @media screen and (max-width: 468px){
    width: 90vw;
  }

  img{
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: var(--corners);
    margin: 1rem;

    @media screen and (max-width: 468px){
      width: 300px;
      height: 300px;
    }

    @media screen and (max-width: 320px){
      width: 240px;
      height: 240px;
    }
  }
}

.article-container:hover {
  background-color: var(--mint-green);
}

.article-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img{
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: var(--corners);
    margin: 1rem;

    @media screen and (max-width: 468px){
      width: 300px;
      height: 300px;
    }

    @media screen and (max-width: 320px){
      width: 240px;
      height: 240px;
    }

    @media screen and (max-width: 280px){
      width: 200px;
      height: 200px;
    }

    @media screen and (max-width: 240px){
      width: 160px;
      height: 160px;
    }
  }


  @media screen and (max-width: 1095px){
    flex-direction: row;

    img{
      min-width: 400px;
    }
  }

  @media screen and (max-width: 468px){
    
    img{
      min-width: none;
    }
  }

  @media screen and (max-width: 753px){
    flex-direction: column;

  }
}