/* ============================================================
   BREADCRUMBS
============================================================ */

#info-page-cover {
     padding: var(--g32);

     picture {
          display: flex;
          border-radius: 3px;
          overflow: hidden;
          width: 100%;

     }
}

/* ============================================================
   INFO PAGE COVER LARGE
============================================================ */

#info-page-cover-two {
     .wrap {
          padding: var(--g44);
          
          h1 {
               font-size: 20px;
               font-weight: 480;
               line-height: 1.75;
          }

          p {
               font-size: 13px;
               padding-top: 2px;
               font-weight: 440;
               line-height: 1.9;
               color: var(--text-hover);
          }
     }
}

/* ============================================================
   CTA
============================================================ */

#info-page-call-to-action {
     position: sticky;
     z-index: 30;
     top: 0;
     background-color: white;

     .content {
          border-bottom: 1px solid var(--stroke);
          padding: var(--g20) 0;

          h1 {
               font-size: 15px;
               font-weight: 460;
               color: var(--headings);
          }
     }
}

/* ============================================================
   COLUMN
============================================================ */

#info-page {
     .column {
          width: 820px;
     }
}

/* ============================================================
   FIRST & TEXT
============================================================ */

.first {
     padding-top: var(--cv);

     .text {
          line-height: 1.9;
          font-size: 13.5px;
          font-weight: 420;
          color: var(--text);
     }

     h3 {
          font-size: 15px;
          font-weight: 480;
          color: var(--headings);
     }

     .list {
          display: flex;
          align-items: center;
          gap: var(--g12);

          &::before {
               position: relative;
               width: 3px;
               height: 3px;
               background-color: var(--text);
               border-radius: 50px;
          }
     }
}

/* ============================================================
   MEET THE TEAM
============================================================ */

.first.meet-the-team {
     padding-top: 0px;
     padding-bottom: var(--cv);

     .team-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--g24);

          .team-card {

               img {
                    width: 100%;
               }
               .name {
                    padding-top: var(--g14);
                    padding-bottom: var(--g10);
                    font-size: 13px;
                    font-weight: 470;
                    color: var(--headings);
               }

               .pos {
                    font-size: 12px;
                    font-weight: 440;
                    color: var(--text);
               }
          }
     }
}

/* ============================================================
   ABOUT HERO
============================================================ */

#about-hero {
     .h1-wrap {
          padding-bottom: var(--g40);
          padding-top: var(--cv);

          h1 {
               font-size: 20px;
               font-weight: 450;
               color: var(--heading);
               line-height: var(--heading-height);
          }
     }
}


@media (max-width: 1580px) {

     /* ============================================================
          CTA
     ============================================================ */

     #info-page-call-to-action {
          .content {
               h1 {
                    font-size: 14px;
               }
          }
     }

     /* ============================================================
     ABOUT HERO
     ============================================================ */

     #about-hero {
          .h1-wrap {
               h1 {
                    font-size: 18px;
               }
          }
     }

     /* ============================================================
          FIRST & TEXT
     ============================================================ */

     .first {

          .text {
               font-size: 12.5px;
          }

          h3 {
               font-size: 14px;
          }

          .list {
               &::before {
                    margin-bottom: 1px;
               }
          }
     }

     /* ============================================================
          INFO PAGE COVER LARGE
     ============================================================ */

     #info-page-cover-two {
          .wrap {
               h1 {
                    font-size: 17px;
               }

               p {
                    font-size: 12px;
               }
          }
     }

     /* ============================================================
          MEET THE TEAM
     ============================================================ */

     .first.meet-the-team {
          .team-grid {
               .team-card {
                    .name {
                         font-size: 12px;
                    }

                    .pos {
                         font-size: 11px;
                    }
               }
          }
     }

}

@media (max-width: 1310px) {
     #way-to-buy {
          .column {
               width: 100% !important;
          }
     }
}

@media (max-width: 1080px) {
     #info-page .column {
          width: 100% !important;
     }
}

@media (max-width: 770px) {
     /* ============================================================
          CTA
     ============================================================ */

     #info-page-call-to-action {
          .content {
               h1 {
                    font-size: 13px;
               }
          }
     }

     

     /* ============================================================
          FIRST & TEXT
     ============================================================ */

     .first {

          .text {
               font-size: 12px;
          }

          h3 {
               font-size: 13.5px;
          }

          .list {
               &::before {
                    margin-bottom: 1px;
               }
          }
     }

     /* ============================================================
          INFO PAGE COVER LARGE
     ============================================================ */

     #info-page-cover-two {
          .wrap {
               flex-direction: column;
               h1 {
                    font-size: 16px;
               }

               p {
                    font-size: 11.5px;
                    margin-top: auto;
                    margin-top: var(--g8);

                    br {
                         display: none;
                    }
               }
          }

          picture {
               aspect-ratio: 192 / 100;
          }
     }

     /* ============================================================
          MEET THE TEAM
     ============================================================ */

     .first.meet-the-team {
          .team-grid {
               width: 100%;
               grid-template-columns: 1fr;
               .team-card {
                    .name {
                         font-size: 12px;
                    }

                    .pos {
                         font-size: 11px;
                    }
               }
          }
     }

     /* ============================================================
     ABOUT HERO
     ============================================================ */

     #about-hero {
          .h1-wrap {
               h1 {
                    font-size: 16px;
               }
          }
     }
}

@media (max-width: 540px) {
     /* ============================================================
          CTA
     ============================================================ */

     #info-page-call-to-action {
          .content {
               h1 {
                    font-size: 12.5px;
               }
          }
     }

     /* ============================================================
     ABOUT HERO
     ============================================================ */

     #about-hero {
          .h1-wrap {
               padding-top: var(--g40);
               h1 {
                    font-size: 15px;

                    br {
                         display: none;
                    }
               }
          }
     }

     /* ============================================================
          FIRST & TEXT
     ============================================================ */

     .first {

          .text {
               font-size: 11px;
          }

          h3 {
               font-size: 12.5px;
          }

          .list {
               &::before {
                    margin-bottom: 2px;
               }
          }
     }

     /* ============================================================
          INFO PAGE COVER LARGE
     ============================================================ */

     #info-page-cover-two {
          .wrap {
               flex-direction: column;

               h1 {
                    font-size: 14px;
               }

               p {
                    font-size: 11px;
                    margin-top: auto;
                    margin-top: var(--g8);

                    br {
                         display: none;
                    }
               }
          }
     }
}

.g60 {
     gap: var(--g60);
}

.g32 {
     gap: var(--g32);
}