Code of Stitch

5 Card

<!-- ============================================ -->
<!--                    Services                  -->
<!-- ============================================ -->

<section id="services-1724">
    <div class="cs-container">
        <div class="cs-content">
            <div class="cs-flex-group">
                <span class="cs-topper">Our Services</span>
                <h2 class="cs-title">We Trained You To Gain</h2>
            </div>
            <p class="cs-text">
                Workouts shift your body from periods of aerobic activity to periods of the best training tools for developing a strong anaerobic activity. When your body is in and “aerobic mode,” your body is using oxygen.
            </p>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <a href="" class="cs-link">
                    <span class="cs-number">01</span>
                    <h3 class="cs-h3">Stretching</h3>
                </a>
                <picture class="cs-picture">
                    <source media="(max-width: 600px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-1.png">
                    <source media="(min-width: 601px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-1.png">
                    <img decoding="async"
                            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-1.png"
                            alt="finance" width="413" height="374" aria-hidden="true" loading="lazy">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <span class="cs-number">02</span>
                    <h3 class="cs-h3">Hypertrophy</h3>
                </a>
                <picture class="cs-picture">
                    <source media="(max-width: 600px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-2.png">
                    <source media="(min-width: 601px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-2.png">
                    <img decoding="async"
                            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-2.png"
                            alt="finance" width="413" height="374" aria-hidden="true" loading="lazy">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <span class="cs-number">03</span>
                    <h3 class="cs-h3">Strength</h3>
                </a>
                <picture class="cs-picture">
                    <source media="(max-width: 600px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-3.png">
                    <source media="(min-width: 601px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-3.png">
                    <img decoding="async"
                            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-3.png"
                            alt="finance" width="413" height="374" aria-hidden="true" loading="lazy">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <span class="cs-number">04</span>
                    <h3 class="cs-h3">Yoga</h3>
                </a>
                <picture class="cs-picture">
                    <source media="(max-width: 600px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-4.png">
                    <source media="(min-width: 601px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-4.png">
                    <img decoding="async"
                            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-4.png"
                            alt="finance" width="413" height="374" aria-hidden="true" loading="lazy">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <span class="cs-number">05</span>
                    <h3 class="cs-h3">Cardio</h3>
                </a>
                <picture class="cs-picture">
                    <source media="(max-width: 600px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-5.png">
                    <source media="(min-width: 601px)"
                            srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-5.png">
                    <img decoding="async"
                            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/gym-service-5.png"
                            alt="finance" width="413" height="374" aria-hidden="true" loading="lazy">
                </picture>
            </li>
        </ul>
    </div>
</section>

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1724 {
    padding: var(--sectionPadding);
    /* removing the side paddings to allow the cards to fit the whole page width */
    padding-right: 0;
    padding-left: 0;
    position: relative;
  }
  #services-1724 .cs-container {
    width: 100%;
    max-width: 156.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1724 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 80rem;
    box-sizing: border-box;
    /* 16px - 40px */
    padding: 0 clamp(1rem, 3.8vw, 2.5rem);
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    gap: 1rem;
  }
  #services-1724 .cs-title {
    max-width: 12ch;
  }
  #services-1724 .cs-text {
    max-width: 39.5rem;
  }
  #services-1724 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #services-1724 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 220px - 480px */
    height: clamp(13.75rem, 32vw, 30rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    background-color: #000;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #services-1724 .cs-item:hover .cs-picture::after {
    opacity: 0.6;
  }
  #services-1724 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
  }
  #services-1724 .cs-item:hover .cs-number {
    opacity: 1;
    /* 16px - 32px */
    top: clamp(1rem, 2.3vw, 2rem);
  }
  #services-1724 .cs-item:hover .cs-h3 {
    opacity: 1;
    /* 16px - 32px */
    bottom: clamp(1rem, 2.3vw, 2rem);
  }
  #services-1724 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 16px - 32px */
    padding: clamp(1rem, 2.3vw, 2rem);
    /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }
  #services-1724 .cs-link::after {
    /* hover overlay */
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    /* as we can't animate background gradients, we animate the change of opacity from 0 to 1 */
    transition: opacity 0.3s;
  }
  #services-1724 .cs-number {
    /* 49px - 84px */
    font-size: clamp(3.0625rem, 6vw, 5.25rem);
    font-weight: 900;
    /* sets the fill of the number to be transparent */
    color: rgba(0, 0, 0, 0);
    opacity: 0;
    position: absolute;
    top: 0;
    /* 16px - 32px */
    right: clamp(1rem, 2.3vw, 2rem);
    transition: opacity 0.3s, top 0.3s;
    /* provides a 1px white stroke to the text, outlining it */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--bodyTextColorWhite);
  }
  #services-1724 .cs-h3 {
    /* 20px - 31px */
    font-size: clamp(1.25rem, 2vw, 1.9375rem);
    font-weight: 900;
    line-height: 1.2em;
    white-space: nowrap;
    /* width, overflow, text-overflow and white-space all provide the ellipsis when the h3 content is too long */
    width: 80%;
    margin: 0;
    color: var(--bodyTextColorWhite);
    overflow: hidden;
    transition: opacity 0.3s, bottom 0.3s;
  }
  #services-1724 .cs-picture {
    width: 100%;
    height: 100%;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
  }
  #services-1724 .cs-picture:before {
    /* gradient overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, #000000 100%);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #services-1724 .cs-picture:after {
    /* background color overlay on hover */
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s;
  }
  #services-1724 .cs-picture img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.7s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1724 {
    padding-bottom: 0;
  }
  #services-1724 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2.5rem;
  }
  #services-1724 .cs-item {
    grid-column: span 4;
  }
  #services-1724 .cs-item:nth-of-type(4),
  #services-1724 .cs-item:nth-of-type(5) {
    grid-column: span 6;
  }
  #services-1724 .cs-text {
    width: 60%;
  }
  #services-1724 .cs-title {
    margin: 0;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1724 .cs-card-group {
    grid-template-columns: repeat(5, 1fr);
  }
  #services-1724 .cs-item {
    grid-column: span 1;
  }
  #services-1724 .cs-item:nth-of-type(4),
  #services-1724 .cs-item:nth-of-type(5) {
    grid-column: span 1;
  }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1724 {
    padding: var(--sectionPadding);
    /* removing the side paddings to allow the cards to fit the whole page width */
    padding-right: 0;
    padding-left: 0;
    position: relative;
  }
  #services-1724 .cs-container {
    width: 100%;
    max-width: 156.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1724 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 80rem;
    box-sizing: border-box;
    /* 16px - 40px */
    padding: 0 clamp(1rem, 3.8vw, 2.5rem);
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    gap: 1rem;
  }
  #services-1724 .cs-title {
    max-width: 12ch;
  }
  #services-1724 .cs-text {
    max-width: 39.5rem;
  }
  #services-1724 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #services-1724 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 220px - 480px */
    height: clamp(13.75rem, 32vw, 30rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    background-color: #000;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #services-1724 .cs-item:hover .cs-picture::after {
    opacity: 0.6;
  }
  #services-1724 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
  }
  #services-1724 .cs-item:hover .cs-number {
    opacity: 1;
    /* 16px - 32px */
    top: clamp(1rem, 2.3vw, 2rem);
  }
  #services-1724 .cs-item:hover .cs-h3 {
    opacity: 1;
    /* 16px - 32px */
    bottom: clamp(1rem, 2.3vw, 2rem);
  }
  #services-1724 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 16px - 32px */
    padding: clamp(1rem, 2.3vw, 2rem);
    /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }
  #services-1724 .cs-link::after {
    /* hover overlay */
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    /* as we can't animate background gradients, we animate the change of opacity from 0 to 1 */
    transition: opacity 0.3s;
  }
  #services-1724 .cs-number {
    /* 49px - 84px */
    font-size: clamp(3.0625rem, 6vw, 5.25rem);
    font-weight: 900;
    /* sets the fill of the number to be transparent */
    color: rgba(0, 0, 0, 0);
    opacity: 0;
    position: absolute;
    top: 0;
    /* 16px - 32px */
    right: clamp(1rem, 2.3vw, 2rem);
    transition: opacity 0.3s, top 0.3s;
    /* provides a 1px white stroke to the text, outlining it */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--bodyTextColorWhite);
  }
  #services-1724 .cs-h3 {
    /* 20px - 31px */
    font-size: clamp(1.25rem, 2vw, 1.9375rem);
    font-weight: 900;
    line-height: 1.2em;
    white-space: nowrap;
    /* width, overflow, text-overflow and white-space all provide the ellipsis when the h3 content is too long */
    width: 80%;
    margin: 0;
    color: var(--bodyTextColorWhite);
    overflow: hidden;
    transition: opacity 0.3s, bottom 0.3s;
  }
  #services-1724 .cs-picture {
    width: 100%;
    height: 100%;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
  }
  #services-1724 .cs-picture:before {
    /* gradient overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, #000000 100%);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #services-1724 .cs-picture:after {
    /* background color overlay on hover */
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s;
  }
  #services-1724 .cs-picture img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.7s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1724 {
    padding-bottom: 0;
  }
  #services-1724 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2.5rem;
  }
  #services-1724 .cs-item {
    grid-column: span 4;
  }
  #services-1724 .cs-item:nth-of-type(4),
  #services-1724 .cs-item:nth-of-type(5) {
    grid-column: span 6;
  }
  #services-1724 .cs-text {
    width: 60%;
  }
  #services-1724 .cs-title {
    margin: 0;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1724 .cs-card-group {
    grid-template-columns: repeat(5, 1fr);
  }
  #services-1724 .cs-item {
    grid-column: span 1;
  }
  #services-1724 .cs-item:nth-of-type(4),
  #services-1724 .cs-item:nth-of-type(5) {
    grid-column: span 1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1724 .cs-title,
  body.dark-mode #services-1724 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1724 .cs-text {
    opacity: 0.8;
  }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1724 {
        padding: var(--sectionPadding);
        /* removing the side paddings to allow the cards to fit the whole page width */
        padding-right: 0;
        padding-left: 0;
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (2500/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            max-width: (1280/16rem);
            box-sizing: border-box;
            /* 16px - 40px */
            padding: 0 clamp(1rem, 3.8vw, 2.5rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
            gap: (16/16rem);
        }

        .cs-title {
            max-width: 12ch;
        }

        .cs-text {
            max-width: (632/16rem);
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            /* 220px - 480px */
            height: clamp(13.75rem, 32vw, 30rem);
            margin: 0;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: 0;
            background-color: #000;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            grid-column: span 12;
            position: relative;
            z-index: 1;

            &:hover {
                .cs-picture {
                    &::after {
                        opacity: 0.6;
                    }

                    img {
                        transform: scale(1.2);
                    }
                }

                .cs-number {
                    opacity: 1;
                    /* 16px - 32px */
                    top: clamp(1rem, 2.3vw, 2rem);
                }

                .cs-h3 {
                    opacity: 1;
                    /* 16px - 32px */
                    bottom: clamp(1rem, 2.3vw, 2rem);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* 16px - 32px */
            padding: clamp(1rem, 2.3vw, 2rem);
            /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            z-index: 1;

            &::after {
                /* hover overlay */
                content: "";
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                /* as we can't animate background gradients, we animate the change of opacity from 0 to 1 */
                transition: opacity 0.3s;
            }
        }

        .cs-number {
            /* 49px - 84px */
            font-size: clamp(3.0625rem, 6vw, 5.25rem);
            font-weight: 900;
            /* sets the fill of the number to be transparent */
            color: rgba(0, 0, 0, 0);
            opacity: 0;
            position: absolute;
            top: 0;
            /* 16px - 32px */
            right: clamp(1rem, 2.3vw, 2rem);
            transition: opacity 0.3s, top 0.3s;
            /* provides a 1px white stroke to the text, outlining it */
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: var(--bodyTextColorWhite);
        }

        .cs-h3 {
            /* 20px - 31px */
            font-size: clamp(1.25rem, 2vw, 1.9375rem);
            font-weight: 900;
            line-height: 1.2em;
            white-space: nowrap;
            /* width, overflow, text-overflow and white-space all provide the ellipsis when the h3 content is too long */
            width: 80%;
            margin: 0;
            color: var(--bodyTextColorWhite);
            overflow: hidden;
            transition: opacity 0.3s, bottom 0.3s;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            /* prevents the mouse from interacting with it */
            pointer-events: none;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            overflow: hidden;

            &:before {
                /* gradient overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(102, 102, 102, 0.00) 0%, #000 100%);
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }

            &:after {
                /* background color overlay on hover */
                content: "";
                width: 100%;
                height: 100%;
                background-color: var(--primary);
                opacity: 0;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                transition: opacity 0.3s;
            }

            img {
                width: 100%;
                height: 100%;
                /* Makes img tag act as a background image */
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: transform 0.7s;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1724 {
        padding-bottom: 0;

        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            gap: (40/16rem);
        }

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

            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 6;
            }
        }

        .cs-text {
            width: 60%;
        }

        .cs-title {
            margin: 0;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-1724 {
        .cs-card-group {
            grid-template-columns: repeat(5, 1fr);
        }

        .cs-item {
            grid-column: span 1;
            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 1;
            }
        }
    }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1724 {
        padding: var(--sectionPadding);
        /* removing the side paddings to allow the cards to fit the whole page width */
        padding-right: 0;
        padding-left: 0;
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (2500/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            max-width: (1280/16rem);
            box-sizing: border-box;
            /* 16px - 40px */
            padding: 0 clamp(1rem, 3.8vw, 2.5rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
            gap: (16/16rem);
        }

        .cs-title {
            max-width: 12ch;
        }

        .cs-text {
            max-width: (632/16rem);
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            /* 220px - 480px */
            height: clamp(13.75rem, 32vw, 30rem);
            margin: 0;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: 0;
            background-color: #000;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            grid-column: span 12;
            position: relative;
            z-index: 1;

            &:hover {
                .cs-picture {
                    &::after {
                        opacity: 0.6;
                    }

                    img {
                        transform: scale(1.2);
                    }
                }

                .cs-number {
                    opacity: 1;
                    /* 16px - 32px */
                    top: clamp(1rem, 2.3vw, 2rem);
                }

                .cs-h3 {
                    opacity: 1;
                    /* 16px - 32px */
                    bottom: clamp(1rem, 2.3vw, 2rem);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* 16px - 32px */
            padding: clamp(1rem, 2.3vw, 2rem);
            /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            z-index: 1;

            &::after {
                /* hover overlay */
                content: "";
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                /* as we can't animate background gradients, we animate the change of opacity from 0 to 1 */
                transition: opacity 0.3s;
            }
        }

        .cs-number {
            /* 49px - 84px */
            font-size: clamp(3.0625rem, 6vw, 5.25rem);
            font-weight: 900;
            /* sets the fill of the number to be transparent */
            color: rgba(0, 0, 0, 0);
            opacity: 0;
            position: absolute;
            top: 0;
            /* 16px - 32px */
            right: clamp(1rem, 2.3vw, 2rem);
            transition: opacity 0.3s, top 0.3s;
            /* provides a 1px white stroke to the text, outlining it */
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: var(--bodyTextColorWhite);
        }

        .cs-h3 {
            /* 20px - 31px */
            font-size: clamp(1.25rem, 2vw, 1.9375rem);
            font-weight: 900;
            line-height: 1.2em;
            white-space: nowrap;
            /* width, overflow, text-overflow and white-space all provide the ellipsis when the h3 content is too long */
            width: 80%;
            margin: 0;
            color: var(--bodyTextColorWhite);
            overflow: hidden;
            transition: opacity 0.3s, bottom 0.3s;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            /* prevents the mouse from interacting with it */
            pointer-events: none;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            overflow: hidden;

            &:before {
                /* gradient overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(102, 102, 102, 0.00) 0%, #000 100%);
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }

            &:after {
                /* background color overlay on hover */
                content: "";
                width: 100%;
                height: 100%;
                background-color: var(--primary);
                opacity: 0;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                transition: opacity 0.3s;
            }

            img {
                width: 100%;
                height: 100%;
                /* Makes img tag act as a background image */
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: transform 0.7s;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1724 {
        padding-bottom: 0;

        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            gap: (40/16rem);
        }

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

            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 6;
            }
        }

        .cs-text {
            width: 60%;
        }

        .cs-title {
            margin: 0;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-1724 {
        .cs-card-group {
            grid-template-columns: repeat(5, 1fr);
        }

        .cs-item {
            grid-column: span 1;
            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 1;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #services-1724 {
            .cs-title,
            .cs-text {
                color: var(--bodyTextColorWhite);
            }

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

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1724 {
        padding: var(--sectionPadding);
        /* removing the side paddings to allow the cards to fit the whole page width */
        padding-right: 0;
        padding-left: 0;
        position: relative;

        .cs-container {
            width: 100%;
            max-width: calc(2500 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            box-sizing: border-box;
            /* 16px - 40px */
            padding: 0 clamp(1rem, 3.8vw, 2.5rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
            gap: calc(16 / 16 * 1rem);
        }

        .cs-title {
            max-width: 12ch;
        }

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

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            /* 220px - 480px */
            height: clamp(13.75rem, 32vw, 30rem);
            margin: 0;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: 0;
            background-color: #000;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            grid-column: span 12;
            position: relative;
            z-index: 1;

            &:hover {
                .cs-picture {
                    &::after {
                        opacity: 0.6;
                    }

                    img {
                        transform: scale(1.2);
                    }
                }

                .cs-number {
                    opacity: 1;
                    /* 16px - 32px */
                    top: clamp(1rem, 2.3vw, 2rem);
                }

                .cs-h3 {
                    opacity: 1;
                    /* 16px - 32px */
                    bottom: clamp(1rem, 2.3vw, 2rem);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* 16px - 32px */
            padding: clamp(1rem, 2.3vw, 2rem);
            /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            z-index: 1;

            &::after {
                /* hover overlay */
                content: "";
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                /* as we can't animate background gradients, we animate the change of opacity from 0 to 1 */
                transition: opacity 0.3s;
            }
        }

        .cs-number {
            /* 49px - 84px */
            font-size: clamp(3.0625rem, 6vw, 5.25rem);
            font-weight: 900;
            /* sets the fill of the number to be transparent */
            color: rgba(0, 0, 0, 0);
            opacity: 0;
            position: absolute;
            top: 0;
            /* 16px - 32px */
            right: clamp(1rem, 2.3vw, 2rem);
            transition: opacity 0.3s, top 0.3s;
            /* provides a 1px white stroke to the text, outlining it */
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: var(--bodyTextColorWhite);
        }

        .cs-h3 {
            /* 20px - 31px */
            font-size: clamp(1.25rem, 2vw, 1.9375rem);
            font-weight: 900;
            line-height: 1.2em;
            white-space: nowrap;
            /* width, overflow, text-overflow and white-space all provide the ellipsis when the h3 content is too long */
            width: 80%;
            margin: 0;
            color: var(--bodyTextColorWhite);
            overflow: hidden;
            transition: opacity 0.3s, bottom 0.3s;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            display: block;
            /* prevents the mouse from interacting with it */
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            overflow: hidden;

            &:before {
                /* gradient overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(102, 102, 102, 0.00) 0%, #000 100%);
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }

            &:after {
                /* background color overlay on hover */
                content: "";
                width: 100%;
                height: 100%;
                background-color: var(--primary);
                opacity: 0;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                transition: opacity 0.3s;
            }

            img {
                width: 100%;
                height: 100%;
                /* Makes img tag act as a background image */
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: transform 0.7s;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1724 {
        padding-bottom: 0;

        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            gap: calc(40 / 16 * 1rem);
        }

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

            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 6;
            }
        }

        .cs-text {
            width: 60%;
        }

        .cs-title {
            margin: 0;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-1724 {
        .cs-card-group {
            grid-template-columns: repeat(5, 1fr);
        }

        .cs-item {
            grid-column: span 1;
            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 1;
            }
        }
    }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1724 {
        padding: var(--sectionPadding);
        /* removing the side paddings to allow the cards to fit the whole page width */
        padding-right: 0;
        padding-left: 0;
        position: relative;

        .cs-container {
            width: 100%;
            max-width: calc(2500 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            box-sizing: border-box;
            /* 16px - 40px */
            padding: 0 clamp(1rem, 3.8vw, 2.5rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
            gap: calc(16 / 16 * 1rem);
        }

        .cs-title {
            max-width: 12ch;
        }

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

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            /* 220px - 480px */
            height: clamp(13.75rem, 32vw, 30rem);
            margin: 0;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: 0;
            background-color: #000;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            grid-column: span 12;
            position: relative;
            z-index: 1;

            &:hover {
                .cs-picture {
                    &::after {
                        opacity: 0.6;
                    }

                    img {
                        transform: scale(1.2);
                    }
                }

                .cs-number {
                    opacity: 1;
                    /* 16px - 32px */
                    top: clamp(1rem, 2.3vw, 2rem);
                }

                .cs-h3 {
                    opacity: 1;
                    /* 16px - 32px */
                    bottom: clamp(1rem, 2.3vw, 2rem);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* 16px - 32px */
            padding: clamp(1rem, 2.3vw, 2rem);
            /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            z-index: 1;

            &::after {
                /* hover overlay */
                content: "";
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                /* as we can't animate background gradients, we animate the change of opacity from 0 to 1 */
                transition: opacity 0.3s;
            }
        }

        .cs-number {
            /* 49px - 84px */
            font-size: clamp(3.0625rem, 6vw, 5.25rem);
            font-weight: 900;
            /* sets the fill of the number to be transparent */
            color: rgba(0, 0, 0, 0);
            opacity: 0;
            position: absolute;
            top: 0;
            /* 16px - 32px */
            right: clamp(1rem, 2.3vw, 2rem);
            transition: opacity 0.3s, top 0.3s;
            /* provides a 1px white stroke to the text, outlining it */
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: var(--bodyTextColorWhite);
        }

        .cs-h3 {
            /* 20px - 31px */
            font-size: clamp(1.25rem, 2vw, 1.9375rem);
            font-weight: 900;
            line-height: 1.2em;
            white-space: nowrap;
            /* width, overflow, text-overflow and white-space all provide the ellipsis when the h3 content is too long */
            width: 80%;
            margin: 0;
            color: var(--bodyTextColorWhite);
            overflow: hidden;
            transition: opacity 0.3s, bottom 0.3s;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            display: block;
            /* prevents the mouse from interacting with it */
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            overflow: hidden;

            &:before {
                /* gradient overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(102, 102, 102, 0.00) 0%, #000 100%);
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }

            &:after {
                /* background color overlay on hover */
                content: "";
                width: 100%;
                height: 100%;
                background-color: var(--primary);
                opacity: 0;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                transition: opacity 0.3s;
            }

            img {
                width: 100%;
                height: 100%;
                /* Makes img tag act as a background image */
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: transform 0.7s;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1724 {
        padding-bottom: 0;

        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            gap: calc(40 / 16 * 1rem);
        }

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

            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 6;
            }
        }

        .cs-text {
            width: 60%;
        }

        .cs-title {
            margin: 0;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-1724 {
        .cs-card-group {
            grid-template-columns: repeat(5, 1fr);
        }

        .cs-item {
            grid-column: span 1;
            &:nth-of-type(4), &:nth-of-type(5) {
                grid-column: span 1;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #services-1724 {
            .cs-title,
            .cs-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text {
                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);
}