/*-------------------------------------------------->
<-----                 MOBILE                  ----->
<--------------------------------------------------*/

@media only screen and (min-width: 0rem) {

  /*---------------------------------->
  <---    BLOG COLLECTION STYLES   --->
  <-----------------------------------*/

  .blog-collection__container {  /* On Blog page */
    position: relative;
    margin: 1rem 2% 2rem 2%;
  }
  .blog-collection__content { /* On Blog page */
    position: relative;
    margin-inline: 5%;
  }
  .blog-collection__content h2 { /* On Blog page */
    margin: 2rem auto 2rem auto;
  }
  .blog-collection__content h3 {
    font-size: 100%;
    margin: -0.3rem auto 0rem auto;
  }
  .blog-collection__list-content {
    display: flex;
    flex-direction: row;
  }
  .blog-collection__list-content ul {
    margin: 0rem 0 0 1rem;
  } 
  .blog-collection__date {
    font-size: 75%;
    margin: 0.25rem 0 0.5rem 0;
  }
  .blog-collection__description {
    font-size: 85%;
    line-height: 1.3;
    margin: 0rem 0;
  }
  .blog-collection__list img {
    width: 7.5rem;
    height: auto;
  }

  p > img:nth-child(1) {
    float: left;
    width: 50%;
    height: auto;
    margin: 0.5rem 1.5rem 0 0;
  }

  /*---------------------------------->
  <---       BLOG POST STYLES      --->
  <-----------------------------------*/

  .blog-post__container {
    margin: 0rem 0rem;
  }
  .blog-post__content {
    margin: 0rem 0.75rem;
  }
  .blog-post__content .author, .date {
    margin-top: 0.25rem;
    text-align: center;
    line-height: 1.5;
  }
  .blog-post__content .date {
    margin-top: 0.15rem;
    font-size: 90%;
  }
  .blog-post__content h1 {
    padding: 1rem 0.5rem .15rem 0.5rem;
    margin-inline: -.75rem;
    font-size: 1.55rem;
    text-align: center;
  }
  .blog__img img {
    margin-top: 3rem;
    width: 100%;
  }
  .blog__text {
    font-weight: 300;
    margin: 1rem auto;  
  }
  .blog__text h2, h3 {
    margin: 1rem auto;  
    }
  .blog__text h2 {
      font-size: 1.15rem;
    }
  .blog__text h3 {
    font-size: 1rem;
  }
  .blog__text p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  .blog__text ul {
    margin-bottom: 1rem;
  }
  .blog__text li {
    margin-left: 5%;
    list-style: disc;
    line-height: 1.5;
    margin-bottom: 0.25rem;
  }
  
}

/*-------------------------------------------------->
<-----        MOBILE LANDSCAPE > 480px         ----->
<--------------------------------------------------*/

@media only screen and (min-width: 30rem) {

  .blog-collection__content h3 {
    font-size: 125%;
    margin: -0.3rem auto 0rem auto;
  }
  .blog-collection__list img {
    width: 12.5rem;
    height: auto;
  }
  .blog-collection__date {
    font-size: 85%;
    margin: 0.25rem 0 0.5rem 0;
  }
  .blog-collection__description {
    font-size: 90%;
    margin: 0.5rem 0;
  }
  .blog-post__content {
    margin: 0rem 5%;
  }

}

/*-------------------------------------------------->
<-----              TABLET > 768px             ----->
<--------------------------------------------------*/

@media only screen and (min-width: 48rem) {  

  .blog-collection__container {  /* On Blog page */
    position: relative;
    margin: 1rem 4% 2rem 4%;
  }
  .blog-collection__content { /* On Blog page */
    position: relative;
    margin-inline: 5%;
  }
  .blog-collection__list img {
    width: 15rem;
    height: auto;
  }
  .blog-collection__description {
    font-size: 91%;
    margin: 0.5rem 0;
  }
  .blog-post__content {
    margin: 0rem 6%;
  }

}

/*-------------------------------------------------->
<-----         SMALL DESKTOP > 1024px          ----->
<--------------------------------------------------*/

@media only screen and (min-width: 64rem) {

  .blog-collection__container {  /* On Blog page */
    position: relative;
    margin: 1rem 7% 2rem 7%;
  }
  .blog-collection__list img {
    width: 18rem;
    height: auto;
  }
  .blog-collection__description {
    font-size: 98%;
    margin: 0.5rem 0;
  }
  .blog-post__content {
    margin: 0rem 10%;
  }

}