/* #region < 1350px = 1350 / 16 = 84.38 = 84em */
@media (max-width: 84em) {
  /* footer */

  .section-footer {
    padding: 12.2rem 3.2rem 6.2rem 3.2rem;
    margin: 0;
  }

  .column-label {
    font-size: 1.8rem;
  }

  .journey-text {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .contact-list li {
    font-size: 1.6rem;
  }
}
/* #endregion < 1350px  */

/* #region < 1150px = 1150 / 16 = 71.87 = 72em */
@media (max-width: 72em) {
  /* section-header */
  .navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.96);

    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.5s ease-out;
    font-size: 0;
  }

  .blog-btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .mobile-main-nav .nav-link:link,
  .mobile-main-nav .nav-link:visited {
    font-size: 2.4rem;
    color: #000;
  }

  .mobile-main-nav .navbar {
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .mobile-main-nav .nav-link:link,
  .mobile-main-nav .nav-link:visited {
    font-size: 2.4rem !important;
    color: #000;
  }

  .mobile-main-nav .nav-link:hover,
  .mobile-main-nav .nav-link:active {
    color: #f68b00;
    border-bottom: 1px solid #f68b00;
  }

  .mobile-main-nav .blog-icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .mobile-main-nav .blog-icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .mobile-main-nav .navbar {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .blog-nav-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2.4rem;
  }

  /* featured */
  .blog-heading-primary {
    font-size: 3.6rem;
  }

  .blog-heading-primary-description {
    font-size: 1.6rem;
  }

  img.female-author {
    width: 4.8rem;
    height: 4.8rem;
  }

  .featured-author {
    font-size: 1.6rem;
  }

  /* articles */
  .blog-heading-tertiary {
    font-size: 1.6rem;
  }

  .blog-text {
    font-size: 1.4rem;
  }

  /* footer */
  .section-footer {
    margin-top: 0;
  }
}
/* #endregion < 1150px */

/* #region < 960px = 960 / 16 = 60em */
@media (max-width: 60em) {
  /* header */

  /* featured */
  .featured-content {
    width: 70% !important;
  }

  /* blog-articles */
  .articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.8rem;
  }

  /* footer */
}
/* #endregion < 960px  */

/* #region < 760px = 760 / 16 = 48em */
@media (max-width: 48em) {
  /* header */
  .logo-box p {
    font-size: 2rem;
    letter-spacing: -0.1px;
  }

  /* featured */
  .text-box {
    margin-top: auto;
    margin-bottom: 5.2rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .featured-content {
    width: 100% !important;
  }

  /* blog-articles */

  /* footer */
  .section-footer {
    max-width: 130rem;
    margin: 0 auto;

    padding-top: 12.2rem;
    padding-bottom: 6.2rem;
  }

  .footer.grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;

    column-gap: 0;
    row-gap: 4rem;

    margin: auto auto;
  }

  .footer-logo {
    width: 8rem;
    height: 8rem;
  }

  .follow-journey {
    grid-column: 1;
    grid-row: 2;
  }
  .contact-us {
    grid-column: 1;
    grid-row: 3;
  }
  .contact-icons {
    grid-column: 1;
    grid-row: 4;
  }
  .follow-journey {
    grid-column: 1;
    grid-row: 2;
  }

  .contact-us * {
    font-size: 1.4rem !important;
  }

  .follow-journey * {
    font-size: 1.4rem !important;
  }

  .contact-icon {
    width: 6rem;
    height: 6rem;
  }

  .copyright {
    font-size: 1.4rem;
  }
}
/* #endregion < 760px  */

/* #region < 560px = 560 / 16 = 35em */
@media (max-width: 35em) {
  /* header */
  .section-header {
    padding: 0 1rem;
  }
  .logo-box {
    gap: 1rem;
  }

  .logo-box .bsi-logo {
    width: 3.6rem;
    height: 3.6rem;
  }

  .logo-box p {
    font-size: 1.4rem;
    letter-spacing: -0.1px;
  }

  /* blog-articles */

  .articles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  /* footer */
  .section-footer {
    max-width: 130rem;
    margin: 0 auto;

    padding-top: 12.2rem;
    padding-bottom: 6.2rem;
  }

  .footer.grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;

    column-gap: 0;
    row-gap: 4rem;

    margin: auto auto;
  }

  .footer-logo {
    width: 8rem;
    height: 8rem;
  }

  .follow-journey {
    grid-column: 1;
    grid-row: 2;
  }
  .contact-us {
    grid-column: 1;
    grid-row: 3;
  }
  .contact-icons {
    grid-column: 1;
    grid-row: 4;
  }
  .follow-journey {
    grid-column: 1;
    grid-row: 2;
  }

  .contact-us * {
    font-size: 1.4rem !important;
  }

  .follow-journey * {
    font-size: 1.4rem !important;
  }

  .contact-icon {
    width: 6rem;
    height: 6rem;
  }

  .copyright {
    font-size: 1.4rem;
  }
}
/* #endregion < 560px = 560 / 16 = 35em */