/* rem and em do NOT depend on html font-size in media queries! 
Instead, 1rem = 1em = 16px */

/* Mobile dropdown menu  */
@media (min-width: 74em) {
  .main-nav--mobile {
    display: none;
  }
}

/**********************/
/* BELOW 1187px(Landscape Tablets)  */
/**********************/
@media (max-width: 74em) {
  html {
    font-size: 56.25%; /* 16px * 0.5625 = 9px */
  }

  /* Mobile dropdown menu  */
  .main-nav--mobile {
    display: none;
  }

  .footer {
    padding: 8rem;
  }

  .main-nav--mobile {
    display: none;
  }
}

/**********************/
/* BELOW 944px(Tablets)  */
/**********************/
@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  .col-title {
    letter-spacing: 0.25rem;
  }

  .divider {
    width: 20rem;
  }

  .col-box::after {
    display: none;
  }

  .grid--5--cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid {
    gap: 4.4rem;
  }

  .herbal-grid > .herbal-img:last-child {
    display: none;
  }
}

/**********************/
/* BELOW 700px(Tablets Portrait)  */
/**********************/
@media (max-width: 49.5em) {
  .main-header {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 3rem;
  }

  .footer {
    padding: 4rem;
  }
}

/**********************/
/* BELOW 700px(Small Tablets)  */
/**********************/
@media (max-width: 44em) {
  /* General */

  .body {
    overflow: hidden;
  }
  .header {
    margin-top: 2.4rem;
  }

  .main-items--icons {
    height: 28.8px;
  }

  /* Grid */
  .grid--3--cols,
  .grid--4--cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--5--cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid {
    gap: 4.4rem;
  }

  /* Typography */
  .section-header {
    font-size: 2.4rem;
  }

  .quote-text {
    font-size: 2rem;
  }

  h2 {
    font-size: 3rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  .blog-box--text {
    line-height: 1.5;
  }

  /* Apotheke Container */

  /* Quote Wrapper */

  .quote-wrapper {
    margin-top: 9.8rem;
    margin-bottom: 14.2rem;
  }

  .quote-mark-left,
  .quote-mark-right {
    font-size: 8rem;
  }

  /* Herbal Images */
  .herbal-img {
    width: 80%;
    justify-self: center;
  }

  .herbal-img:nth-child(odd) {
    justify-self: end;
  }

  .herbal-img:nth-child(even) {
    justify-self: start;
  }

  /* .herbal-grid > .herbal-img:last-child {
    display: none;
  } */

  /* Apotheke */
  .apotheke {
    height: 57rem;
  }

  /* Mobile Navigation */

  .main-nav--mobile {
    display: block;
  }

  .blur {
    background-color: #ffffff91;
    filter: blur(3px);
    transition: filter 0.3s ease;
  }

  .toolbar-item,
  .main-nav {
    display: none;
  }

  .main-nav--mobile {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100vh;
    min-width: 36rem;
    z-index: 100;
    transition: left 0.3s ease;
  }

  .main-nav--mobile.show-menu {
    left: 0;
  }

  .main-nav--list--mobile {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    list-style: none;
  }

  .main-nav--link--mobile {
    text-decoration: none;
    color: #090203;
    font-size: 2.4rem;
    font-weight: 100;
    letter-spacing: 0.4rem;
  }

  .icon-mobile--heart {
    color: #090203;
    font-size: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-mobile-nav {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2.4rem;
  }

  .main-items--list {
    font-size: 3.6rem;
  }

  .main-items--list > :nth-child(2),
  .main-items--list > :nth-child(3),
  .main-items--list > :nth-child(4) {
    display: none;
  }

  .icon-mobile-open {
    font-size: 3.6rem;
  }

  .select:hover .dropdown-icon {
    color: #090203;
  }

  /* Footer */

  .grid--footer {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer {
    padding: 4.8rem;
  }

  .footer-logo img {
    width: 50%;
  }

  .footer-logo--title {
    font-size: 1.6rem;
  }

  .footer-logo--name {
    font-size: 1.2rem;
  }

  .social-icon {
    height: 2rem;
    width: 2rem;
  }

  .social-links {
    gap: 1.6rem;
  }

  .icon-inner .footer-link:link,
  .footer-link:visited {
    font-size: 1.2rem;
  }

  .logo-col {
    grid-row: span 2;
    justify-content: center;
  }

  .nav-col--3 {
    grid-column: 2;
  }

  .nav-col--4 {
    grid-column: 3;
  }
}

/**********************/
/* BELOW 544px(Phones)   */
/**********************/

@media (max-width: 34em) {
  .grid- {
    row-gap: 4.8rem;
  }

  .grid--2--cols,
  .grid--3--cols,
  .grid--4--cols {
    grid-template-columns: 1fr;
  }

  .icon-mobile-open {
    font-size: 3.6rem;
  }

  .main-header {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .slide-text--1,
  .slide-text--2,
  .slide-text--3 {
    align-items: flex-start;
    top: 4.5rem;
    left: 4.5rem;
    right: 0;
  }

  /* .product-img--1 {
    filter: brightness(0.8);
  } */

  .quote-mark-left,
  .quote-mark-right {
    font-size: 6rem;
  }

  .quote-text {
    letter-spacing: 0.5px;
  }

  .roots {
    position: relative;
  }

  .roots-container {
    position: absolute;
    top: 50%; /* Position at the vertical center of the viewport */
    left: 50%; /* Position at the horizontal center of the viewport */
    transform: translate(
      -50%,
      -50%
    ); /* Center the element both vertically and horizontally */
    background-color: #fff;
    width: 40rem;
    opacity: 0.97;
  }

  .col-box img {
    width: 35%;
  }

  .apotheke-img img {
    width: 100%;
    height: 60rem;
    object-fit: cover;
  }

  .apotheke {
    position: relative; /* Required for absolute positioning */
  }

  .apotheke-container {
    position: absolute; /* Position relative to the .apotheke parent */
    top: 50%; /* Place the top of the .apotheke-container at the vertical center of its parent */
    left: 50%; /* Place the left of the .apotheke-container at the horizontal center of its parent */
    transform: translate(
      -50%,
      -50%
    ); /* Center the .apotheke-container both vertically and horizontally */
    background-color: #fff;
    width: 40rem;
    opacity: 0.97;
  }

  .section-header {
    text-align: center;
    line-height: 1.5;
  }

  .footer-link--a {
    line-height: 1.5;
  }
}

/**********************/
/* BELOW 412px(Medium & Small Phones)   */
/**********************/

@media (max-width: 25.75em) {
  /* Header */

  .header {
    margin: 1.6rem 0 1.6rem 0;
  }

  .kranich-logo {
    min-width: 7rem;
  }

  .main-logo--title {
    font-size: 1.6rem;
  }

  .main-items--icons {
    height: 24px;
  }

  .container {
    padding: 0 2rem;
  }

  .icon-mobile-open,
  .icon-mobile--heart,
  .main-items--list {
    font-size: 3rem;
  }

  /* Product Swiper */

  h3 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 2rem;
  }

  .product-link {
    font-size: 1.4rem;
    width: 17rem;
  }

  .slide-text {
    gap: 1.6rem;
  }

  .slide-text--h3--3,
  .slide-text--h2--3 {
    line-height: 1.5;
    text-align: right;
    color: #fff;
  }

  .slide-text--h3--2,
  .slide-text--h2--2 {
    color: #090203;
  }

  .product-link--3 {
    color: #fff;
  }

  /* .product-img--1 {
    filter: brightness(0.5);
  } */

  .product-img--3 {
    filter: saturate(0.5) brightness(0.6);
  }

  .slide-text--3 {
    align-items: flex-end;
    top: 4rem;
    right: 13px;
  }

  /* Quote*/

  .quote-text {
    font-size: 1.6rem;
  }

  .quote-mark-left,
  .quote-mark-right {
    height: 3rem;
    width: 3rem;
    font-size: 5rem;
  }

  .quote-mark-left {
    vertical-align: -1rem;
  }

  .quote-wrapper {
    margin-bottom: 9.8rem;
  }

  /* Recommendations */
  .section-header {
    font-size: 2rem;
  }

  .herbal-img {
    width: 90%;
  }

  .grid {
    gap: 3.2rem;
  }

  .herbal-text {
    letter-spacing: 0.25rem;
  }

  /* Footer */
  .grid--footer {
    grid-template-columns: 1fr 1fr;
  }

  .logo-col {
    grid-column: span 2;
  }

  .nav-col--3 {
    grid-column: 1;
  }

  .nav-col--4 {
    grid-column: 2;
  }

  .footer-logo img {
    width: 30%;
  }
}