/* LG - SMALL LAPTOPS: 1024px - 1280px */

@media (max-width: 72rem) {
    /* 1150px / 16px = 72rem */
    /* 72rem x 16px = 1152px */

    html {
        font-size: 56.25%;
        /* 9px / 16px = 56.25% */
    }

    .project-section-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* MD - TABLETS: 768px - 1024px */

@media (max-width: 51rem) {
    /* 815px / 16px = 51rem */
    /* 51rem x 16px = 816px */

    html {
        font-size: 50%;
        /* 8px / 16px = 50% */
    }
}

/* SM - PHONE LANDSCAPE: 576px - 768px */

@media (max-width: 43rem) {
    /* 680px / 16px = 43rem */
    /* 43rem x 16px = 688px */

    html {
        font-size: 43.75%;
        /* 7px / 16px = 43.75% */
    }

    #background-video {
        display: none;
    }
    
    .overlay-gradient {
        display: none;
    }
    
    .hero-grid-container {
        grid-template-columns: 1fr;
    }

    .about-grid-container {
        grid-template-columns: 1fr;
    }

    .post-img {
        max-width: 40rem;
    }
}

/* XS - PHONE PORTRAINT:  < 576px */

@media (max-width: 34rem) {
    /* 530px / 16px = 34rem */
    /* 34rem x 16px = 544px */

    html {
        font-size: 37.5%;
        /* 6px / 16px = 37.5% */
    }

  .logo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .explain-grid-imgs {
    max-width: 15rem;
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }


  .project-section-grid {
    grid-template-columns: 1fr;
  }

  .software-section-grid {
    grid-template-columns: 1fr 1fr;
  }

   .post-img {
        max-width: 30rem;
    }

}