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

.breadcrumbs {
     a,span {
          font-size: 12px;
          font-weight: 430;
          color: var(--subtext);
          

          &.active {
               color: var(--heading);
          }
     }

     a:hover {
          color: var(--text-hover);
          text-decoration: underline;
     }
     
     svg {
          height: 6px;
          color: var(--text);
     }

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

/* ============================================================
   BLACK SECTION
============================================================ */

.section-heading {
     padding: var(--g20);

     h1 {
          font-weight: 480;
          font-size: 15px;
          color: white;
     }
}

/* ============================================================
   SPACING
============================================================ */

.first-section {
     padding-top: var(--g80);
     padding-bottom: var(--g120);
}

/* ============================================================
   FIlTER CARD
============================================================ */

.filter-card-grid {
     gap: var(--g32);
     row-gap: var(--g40);
     display: grid;
     grid-template-columns: repeat(3, 1fr);

     .filter-card {
          .image-wrap {
               position: relative;
               width: 100%;
               overflow: hidden;
               border-radius: 2px;

               .blur {
                    background-color: hsl(0, 0%, 10%, .4);
               }

               .logo {
                    position: absolute;
               }

               picture {
                    display: flex;
                    width: 100%;
               }
          }

          h3 {
               color: var(--heading);
               font-size: 12.5px;
               font-weight: 500;
               margin-top: var(--g12);
          }

          p {
               color: var(--text);
               font-size: 12px;
               margin-top: var(--g8);
          }

          &:hover {
               .image-wrap {
                    .blur {
                         opacity: .7;
                    }

                    picture {
                         scale: 1.07;
                    }
               }

               h3 {
                    text-decoration: underline;
               }
          }
     }
}

/* ============================================================
     INFO TABLET
============================================================ */

.info-table {
     display: grid;
     grid-template-columns: 1fr 2.8fr;
     padding: var(--g20) 0;
     border-bottom: 1px solid var(--stroke);
     gap: var(--g20);

     &.top-stroke {
          border-top: 1px solid var(--stroke);
     }

     picture {
          display: flex;
          border-radius: 2px;
          overflow: hidden;
     }

     h3 {
          font-size: 13px;
          font-weight: 480;
          color: var(--heading);
     }

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

     div {
          padding: var(--g8) 0;
     }
}

@media (max-width: 1580px) {
    /* ============================================================
          BREADCRUMBS
     ============================================================ */

     .breadcrumbs {
          a,span {
               font-size: 11px;
          }

          svg {
               height: 5px;
          }
     }

     /* ============================================================
     BLACK SECTION
     ============================================================ */

     .section-heading {
          h1 {
               font-size: 13.5px;
          }
     }

     /* ============================================================
          FIlTER CARD
     ============================================================ */

     .filter-card-grid {
          .filter-card {
               .image-wrap {
                    .logo {
                         position: absolute;
                         scale: .9;
                    }
               }

               h3 {
                    font-size: 12px;
               }

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

     /* ============================================================
          INFO TABLET
     ============================================================ */

     .info-table {
          h3 {
               font-size: 12px;
               font-weight: 480;
               color: var(--heading);
          }

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

@media (max-width: 1080px) {

     /* ============================================================
          FIlTER CARD
     ============================================================ */

     .filter-card-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: var(--g12);
          .filter-card {
               .image-wrap {
                    .logo {
                         scale: .85;
                    }
               }
          }

          p {
               display: none;
          }

          &.logos {
               .filter-card {
                    h3 {
                         display: none;
                    }
               }
          }
     }
     
}

@media (max-width: 770px) {

     /* ============================================================
     BLACK SECTION
     ============================================================ */

     .section-heading {
          h1 {
               font-size: 12.5px;
          }
     }

     /* ============================================================
          Breadcrumbs
     ============================================================ */

     .breadcrumbs {
          .content {
               padding: var(--g20) 0;
          }
     }

     /* ============================================================
          BLACK SECTION
     ============================================================ */

     .first-section {
          padding-top: var(--g64);
          padding-bottom: var(--cv);
     }

     /* ============================================================
          FIlTER CARD
     ============================================================ */

     .filter-card-grid {
          gap: var(--g6);
          grid-template-columns: 1fr;

          &.industries {
               gap: var(--g36);
          }
          .filter-card {
               .image-wrap {
                    aspect-ratio: 54 / 28;
                    .logo {
                         position: absolute;
                         scale: 1;
                    }
               }

               h3 {
                    font-size: 11.5px;
               }
          }
     }

     /* ============================================================
          INFO TABLET
     ============================================================ */

     .info-table-wrap {
          gap: var(--g12);
     }

     .info-table {
          background-color: #F7F7F7;
          padding: var(--g18);
          border-bottom: none;
          border-radius: 2px;
          display: flex;
          flex-direction: column;
          gap: var(--g16);
          
          &.top-stroke {
               border-top: none;
          }

          picture {
               display: none;
          }

          .icon {
               width: 21px;
               border-radius: 50px;
               background-color: #E6E6E6;
               color: var(--subheading);

               svg {
                    width: 8px;
               }
          }

          p {
               font-size: 11px;
               display: -webkit-box;
               -webkit-box-orient: vertical;
               -webkit-line-clamp: 2;
               line-clamp: 2;
               overflow: hidden;
          }
     }

     .info-table {
        cursor: pointer;
    }

    .info-table-content {
        position: fixed;
        bottom: 0;
        left: 0;
          transition-duration: .35s;
        width: 100%;
        padding: var(--g20);
        border-radius: 5px 5px 0 0;
        z-index: 1001;
        background: #fff;
        box-sizing: border-box;
        transform: translateY(100%);

          &.active {
               transform: translateY(0);
          }

          picture {
               display: flex;
               width: 100%;
               aspect-ratio: 16 / 9;
               overflow: hidden;
               border-radius: 3px;

               img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
               }
          }

          h3 {
               font-size: 12.5px;
               font-weight: 480;
               color: var(--heading);
          }

          p {
               margin-top: var(--g8);
               margin-bottom: var(--g24);
               font-size: 11.5px;
               font-weight: 420;
               color: var(--text);
               line-height: 1.9;
          }

          .icon {
               background-color: #f2f2f2;
               transform: rotate(45deg);
               width: 22px;
               height: 22px;
               color: var(--subheading);
               border-radius: 50px;
               margin-left: auto;
               margin-bottom: var(--g8);

               svg {
                    height: 9px;
               }
          }
    }
}

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

     .breadcrumbs,span {
          a {
               font-size: 10.5px;
          }

          svg {
               height: 4px;
          }
     }

     /* ============================================================
     BLACK SECTION
     ============================================================ */

     .section-heading {
          h1 {
               font-size: 12px;
          }
     }

     .info-table {
          .icon {
               width: 21px;
               border-radius: 50px;
               background-color: #E6E6E6;

               svg {
                    width: 8px;
               }
          }

          h3 {
               font-size: 12px;
          }

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