Code of Stitch

8 Card

<!-- ============================================ -->
<!--                    Team                      -->
<!-- ============================================ -->

<section id="meet-team-2071">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Our Team</span>
            <h2 class="cs-title">Meet Our Team</h2>
            <p class="cs-text">
                Orci eu lobortis elementum nibh tellus. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Luctus accumsan tortor posuere ac ut consequat semper. Et pharetra pharetra massa massa ultricies mi quis.
            </p>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <span class="cs-name">Dr. Ronald Richards</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Cameron Williamson</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Brooklyn Simmons</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Savannah Nguyen</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Albert Flores</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Eleanor Pena</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Dianne Russell</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
            <li class="cs-item">
                <span class="cs-name">Dr. Darlene Robertson</span>
                <div class="cs-flex">
                    <span class="cs-job">Dental Surgeon</span>
                    <span class="cs-department">Cosmetic and Aesthetic Dentistry</span>
                </div>
            </li>
        </ul>
    </div>
    <picture class="cs-background">
        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/dentist-staff.jpeg">
        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/dentist-staff.jpeg">
        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/dentist-staff.jpeg" alt="dentist staff" width="1024" height="894">
    </picture>
</section>

/*-- -------------------------- -->
<!--            Team            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-2071 {
    /* 240px - 480px top */
    /* 60px - 100px bottom */
    /* 16px left & right */
    padding: clamp(15rem, 30vw, 30rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    background-color: #FAF6F2;
    overflow: hidden;
    position: relative;
  }
  #meet-team-2071:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 3.06%, #FFF 20.29%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #meet-team-2071 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #meet-team-2071 .cs-content {
    text-align: center;
    width: 100%;
    max-width: 59rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #meet-team-2071 .cs-text {
    max-width: none;
  }
  #meet-team-2071 .cs-card-group {
    width: 100%;
    max-width: 80rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 2.5rem;
    position: relative;
  }
  #meet-team-2071 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-column: span 12;
    gap: 1rem;
  }
  #meet-team-2071 .cs-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--headerColor);
  }
  #meet-team-2071 .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  #meet-team-2071 .cs-job {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #meet-team-2071 .cs-department {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #meet-team-2071 .cs-background {
    width: 100%;
    height: clamp(20%, 80vw, 100%);
    min-height: 26.25rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-2071 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    /* makes image act as a background image */
    object-fit: cover;
    object-position: bottom;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meet-team-2071:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 19.7%, #FFF 45.39%);
  }
  #meet-team-2071 .cs-card-group {
    gap: 2.5rem 5rem;
  }
  #meet-team-2071 .cs-item {
    text-align: left;
    align-items: flex-start;
    grid-column: span 6;
  }
  #meet-team-2071 .cs-flex {
    align-items: flex-start;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #meet-team-2071:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 19.7%, rgba(255, 255, 255, 0.92) 59.51%);
  }
  #meet-team-2071 .cs-container {
    max-width: 80rem;
  }
  #meet-team-2071 .cs-item {
    grid-column: span 4;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #meet-team-2071 .cs-item {
    grid-column: span 3;
  }
}

/*-- -------------------------- -->
<!--            Team            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-2071 {
    /* 240px - 480px top */
    /* 60px - 100px bottom */
    /* 16px left & right */
    padding: clamp(15rem, 30vw, 30rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    background-color: #FAF6F2;
    overflow: hidden;
    position: relative;
  }
  #meet-team-2071:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 3.06%, #FFF 20.29%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #meet-team-2071 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #meet-team-2071 .cs-content {
    text-align: center;
    width: 100%;
    max-width: 59rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #meet-team-2071 .cs-text {
    max-width: none;
  }
  #meet-team-2071 .cs-card-group {
    width: 100%;
    max-width: 80rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 2.5rem;
    position: relative;
  }
  #meet-team-2071 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-column: span 12;
    gap: 1rem;
  }
  #meet-team-2071 .cs-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--headerColor);
  }
  #meet-team-2071 .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  #meet-team-2071 .cs-job {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #meet-team-2071 .cs-department {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #meet-team-2071 .cs-background {
    width: 100%;
    height: clamp(20%, 80vw, 100%);
    min-height: 26.25rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-2071 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    /* makes image act as a background image */
    object-fit: cover;
    object-position: bottom;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meet-team-2071:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 19.7%, #FFF 45.39%);
  }
  #meet-team-2071 .cs-card-group {
    gap: 2.5rem 5rem;
  }
  #meet-team-2071 .cs-item {
    text-align: left;
    align-items: flex-start;
    grid-column: span 6;
  }
  #meet-team-2071 .cs-flex {
    align-items: flex-start;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #meet-team-2071:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 19.7%, rgba(255, 255, 255, 0.92) 59.51%);
  }
  #meet-team-2071 .cs-container {
    max-width: 80rem;
  }
  #meet-team-2071 .cs-item {
    grid-column: span 4;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #meet-team-2071 .cs-item {
    grid-column: span 3;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #meet-team-2071:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 19.7%, var(--dark) 59.51%);
  }
  body.dark-mode #meet-team-2071 .cs-title,
  body.dark-mode #meet-team-2071 .cs-text,
  body.dark-mode #meet-team-2071 .cs-name,
  body.dark-mode #meet-team-2071 .cs-job,
  body.dark-mode #meet-team-2071 .cs-department {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #meet-team-2071 .cs-text,
  body.dark-mode #meet-team-2071 .cs-department {
    opacity: 0.8;
  }
}

/*-- -------------------------- -->
<!--            Team            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #meet-team-2071 {
        /* 240px - 480px top */
        /* 60px - 100px bottom */
        /* 16px left & right */
        padding: clamp(15rem, 30vw, 30rem) (16/16rem) clamp(3.75rem, 7.82vw, 6.25rem) (16/16rem);
        background-color: #FAF6F2;
        overflow: hidden;
        position: relative;

        &:before {
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 3.06%, #FFF 20.29%);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (704/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
            z-index: 1;
        }

        .cs-content {
            text-align: center;
            width: 100%;
            max-width: (944/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-text {
            max-width: none;
        }

        .cs-card-group {
            width: 100%;
            max-width: (1280/16rem);
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: (40/16rem);
            position: relative;
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            grid-column: span 12;
            gap: (16/16rem);
        }

        .cs-name {
            font-size: (20/16rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--headerColor);
        }

        .cs-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (4/16rem);
        }

        .cs-job {
            font-size: (16/16rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-department {
            font-size: (16/16rem);
            font-weight: 400;
            line-height: 1.5em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-background {
            width: 100%;
            height: clamp(20%, 80vw, 100%);
            min-height: (420/16rem);
            display: block;
            position: absolute;
            top: 0;
            left: 0;

            img {
                width: 100%;
                height: 100%;
                opacity: .6;
                /* makes image act as a background image */
                object-fit: cover;
                object-position: bottom;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, #FFF 45.39%);
        }

        .cs-card-group {
            gap: (40/16rem) (80/16rem);
        }

        .cs-item {
            text-align: left;
            align-items: flex-start;
            grid-column: span 6;
        }

        .cs-flex {
            align-items: flex-start;
        }
    } 
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, rgba(255, 255, 255, 0.92) 59.51%);
        }

        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-item {
            grid-column: span 4;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #meet-team-2071 {
        .cs-item {
            grid-column: span 3;
        }
    }
}

/*-- -------------------------- -->
<!--            Team            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #meet-team-2071 {
        /* 240px - 480px top */
        /* 60px - 100px bottom */
        /* 16px left & right */
        padding: clamp(15rem, 30vw, 30rem) (16/16rem) clamp(3.75rem, 7.82vw, 6.25rem) (16/16rem);
        background-color: #FAF6F2;
        overflow: hidden;
        position: relative;

        &:before {
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 3.06%, #FFF 20.29%);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (704/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
            z-index: 1;
        }

        .cs-content {
            text-align: center;
            width: 100%;
            max-width: (944/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-text {
            max-width: none;
        }

        .cs-card-group {
            width: 100%;
            max-width: (1280/16rem);
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: (40/16rem);
            position: relative;
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            grid-column: span 12;
            gap: (16/16rem);
        }

        .cs-name {
            font-size: (20/16rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--headerColor);
        }

        .cs-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (4/16rem);
        }

        .cs-job {
            font-size: (16/16rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-department {
            font-size: (16/16rem);
            font-weight: 400;
            line-height: 1.5em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-background {
            width: 100%;
            height: clamp(20%, 80vw, 100%);
            min-height: (420/16rem);
            display: block;
            position: absolute;
            top: 0;
            left: 0;

            img {
                width: 100%;
                height: 100%;
                opacity: .6;
                /* makes image act as a background image */
                object-fit: cover;
                object-position: bottom;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, #FFF 45.39%);
        }

        .cs-card-group {
            gap: (40/16rem) (80/16rem);
        }

        .cs-item {
            text-align: left;
            align-items: flex-start;
            grid-column: span 6;
        }

        .cs-flex {
            align-items: flex-start;
        }
    } 
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, rgba(255, 255, 255, 0.92) 59.51%);
        }

        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-item {
            grid-column: span 4;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #meet-team-2071 {
        .cs-item {
            grid-column: span 3;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #meet-team-2071 {
            &:before {
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, var(--dark) 59.51%);
            }

            .cs-title, .cs-text, .cs-name, .cs-job, .cs-department {
                color: var(--bodyTextColorWhite);
            }

            .cs-text, .cs-department {
                opacity: 0.8;
            }
        }
    }
}

/*-- -------------------------- -->
<!--            Team            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #meet-team-2071 {
        /* 240px - 480px top */
        /* 60px - 100px bottom */
        /* 16px left & right */
        padding: clamp(15rem, 30vw, 30rem) calc(16/16 * 1rem) clamp(3.75rem, 7.82vw, 6.25rem) calc(16/16 * 1rem);
        background-color: #FAF6F2;
        overflow: hidden;
        position: relative;

        &:before {
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 3.06%, #FFF 20.29%);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: calc(704/16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
            z-index: 1;
        }

        .cs-content {
            text-align: center;
            width: 100%;
            max-width: calc(944/16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-text {
            max-width: none;
        }

        .cs-card-group {
            width: 100%;
            max-width: calc(1280/16 * 1rem);
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: calc(40/16 * 1rem);
            position: relative;
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            grid-column: span 12;
            gap: calc(16/16 * 1rem);
        }

        .cs-name {
            font-size: calc(20/16 * 1rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--headerColor);
        }

        .cs-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(4/16 * 1rem);
        }

        .cs-job {
            font-size: calc(16/16 * 1rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-department {
            font-size: calc(16/16 * 1rem);
            font-weight: 400;
            line-height: 1.5em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-background {
            width: 100%;
            height: clamp(20%, 80vw, 100%);
            min-height: calc(420/16 * 1rem);
            display: block;
            position: absolute;
            top: 0;
            left: 0;

            img {
                width: 100%;
                height: 100%;
                opacity: .6;
                /* makes image act as a background image */
                object-fit: cover;
                object-position: bottom;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, #FFF 45.39%);
        }

        .cs-card-group {
            gap: calc(40/16 * 1rem) calc(80/16 * 1rem);
        }

        .cs-item {
            text-align: left;
            align-items: flex-start;
            grid-column: span 6;
        }

        .cs-flex {
            align-items: flex-start;
        }
    } 
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, rgba(255, 255, 255, 0.92) 59.51%);
        }

        .cs-container {
            max-width: calc(1280/16 * 1rem);
        }

        .cs-item {
            grid-column: span 4;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #meet-team-2071 {
        .cs-item {
            grid-column: span 3;
        }
    }
}

/*-- -------------------------- -->
<!--            Team            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #meet-team-2071 {
        /* 240px - 480px top */
        /* 60px - 100px bottom */
        /* 16px left & right */
        padding: clamp(15rem, 30vw, 30rem) calc(16/16 * 1rem) clamp(3.75rem, 7.82vw, 6.25rem) calc(16/16 * 1rem);
        background-color: #FAF6F2;
        overflow: hidden;
        position: relative;

        &:before {
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 3.06%, #FFF 20.29%);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: calc(704/16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
            z-index: 1;
        }

        .cs-content {
            text-align: center;
            width: 100%;
            max-width: calc(944/16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-text {
            max-width: none;
        }

        .cs-card-group {
            width: 100%;
            max-width: calc(1280/16 * 1rem);
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: calc(40/16 * 1rem);
            position: relative;
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            grid-column: span 12;
            gap: calc(16/16 * 1rem);
        }

        .cs-name {
            font-size: calc(20/16 * 1rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--headerColor);
        }

        .cs-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(4/16 * 1rem);
        }

        .cs-job {
            font-size: calc(16/16 * 1rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-department {
            font-size: calc(16/16 * 1rem);
            font-weight: 400;
            line-height: 1.5em;
            text-align: inherit;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-background {
            width: 100%;
            height: clamp(20%, 80vw, 100%);
            min-height: calc(420/16 * 1rem);
            display: block;
            position: absolute;
            top: 0;
            left: 0;

            img {
                width: 100%;
                height: 100%;
                opacity: .6;
                /* makes image act as a background image */
                object-fit: cover;
                object-position: bottom;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, #FFF 45.39%);
        }

        .cs-card-group {
            gap: calc(40/16 * 1rem) calc(80/16 * 1rem);
        }

        .cs-item {
            text-align: left;
            align-items: flex-start;
            grid-column: span 6;
        }

        .cs-flex {
            align-items: flex-start;
        }
    } 
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #meet-team-2071 {
        &:before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, rgba(255, 255, 255, 0.92) 59.51%);
        }

        .cs-container {
            max-width: calc(1280/16 * 1rem);
        }

        .cs-item {
            grid-column: span 4;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #meet-team-2071 {
        .cs-item {
            grid-column: span 3;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #meet-team-2071 {
            &:before {
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 19.7%, var(--dark) 59.51%);
            }

            .cs-title, .cs-text, .cs-name, .cs-job, .cs-department {
                color: var(--bodyTextColorWhite);
            }

            .cs-text, .cs-department {
                opacity: 0.8;
            }
        }
    }
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: (4/16rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: (700/16rem);
    margin: 0 0 (16/16rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: (650/16rem);
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(4 / 16 * 1rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: calc(700 / 16 * 1rem);
    margin: 0 0 calc(16 / 16 * 1rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: calc(650 / 16 * 1rem);
    margin: 0;
    color: var(--bodyTextColor);
}