Code of Stitch

4 Images

<!-- ============================================ -->
<!--                   Gallery                    -->
<!-- ============================================ -->

<section id="gallery-1897">
    <div class="cs-container">
        <div class="cs-content">
            <div class="cs-flex">
                <span class="cs-topper">Our Gallery</span>
                <h2 class="cs-title">Witness The Difference and Our Results</h2>
            </div>
            <a class="cs-button-solid" href="">View All</a>
        </div>
        <!--Gallery-->
        <div class="cs-gallery">
            <div class="cs-item">
                <p class="cs-item-text">Treatment of neck wrinkles using SkinPen microneedling</p>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">Before</span>
                </div>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">After</span>
                </div>
            </div>
            <div class="cs-item">
                <p class="cs-item-text">Skin rejuvenation using the PicoSure Pro laser</p>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-1.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-1.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-1.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">Before</span>
                </div>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-1.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-1.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-1.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">After</span>
                </div>
            </div>
            <div class="cs-item">
                <p class="cs-item-text">Treatment of brown spots using the PicoSure Pro laser</p>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-2.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-2.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-2.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">Before</span>
                </div>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-2.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-2.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-2.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">After</span>
                </div>
            </div>
            <div class="cs-item">
                <p class="cs-item-text">Treatment of acne scars using the PicoSure Pro laser</p>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-3.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-3.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-before-3.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">Before</span>
                </div>
                <div class="cs-picture-group">
                    <picture class="cs-picture">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-3.png">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-3.png">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/derma-gallery-after-3.png" alt="gallery" width="305" height="400">
                    </picture>
                    <span class="cs-tag">After</span>
                </div>
            </div>
        </div>
    </div>
    <img class="cs-graphic cs-graphic-top" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/derma-bg-1.svg" alt="graphic" width="517" height="469" loading="lazy" decoding="async" aria-hidden="true" >
    <img class="cs-graphic cs-graphic-bottom" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/derma-bg-2.svg" alt="graphic" width="517" height="469" loading="lazy" decoding="async" aria-hidden="true" >
</section>

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1897 {
    padding: var(--sectionPadding);
    background-color: #f6eddf;
    /* stops the cs-graphics from causing an overflow */
    overflow: hidden;
    position: relative;
  }
  #gallery-1897 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery-1897 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
  }
  #gallery-1897 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #gallery-1897 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #gallery-1897 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #gallery-1897 .cs-button-solid:hover {
    color: #fff;
  }
  #gallery-1897 .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1897 .cs-gallery {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    z-index: 1;
  }
  #gallery-1897 .cs-item {
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #faf6f2;
    /* 16px - 32px */
    border-radius: 1rem;
    display: grid;
    /* 8px - 16px */
    column-gap: clamp(0.5rem, 2vw, 1rem);
    row-gap: 1rem;
  }
  #gallery-1897 .cs-item-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    grid-column: span 2;
  }
  #gallery-1897 .cs-picture-group {
    /* 160px - 320px */
    min-height: clamp(10rem, 23vw, 20rem);
    overflow: hidden;
    border-radius: 1rem;
    grid-column: span 1;
    position: relative;
  }
  #gallery-1897 .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
  }
  #gallery-1897 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-1897 .cs-tag {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    border-radius: 1.875rem;
    position: absolute;
    /* 8px - 16px */
    bottom: clamp(0.5rem, 2vw, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    backdrop-filter: blur(8px);
  }
  #gallery-1897 .cs-graphic {
    /* 500px - 835px */
    width: clamp(31.25rem, 60vw, 52.1875rem);
    /* 453px - 757px */
    height: clamp(28.3125rem, 55vw, 47.3125rem);
    object-fit: cover;
    position: absolute;
    z-index: 0;
  }
  #gallery-1897 .cs-graphic-top {
    top: 0;
    right: -8.875rem;
  }
  #gallery-1897 .cs-graphic-bottom {
    bottom: 0;
    left: 0;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1897 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-1897 .cs-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  #gallery-1897 .cs-graphic-top {
    right: -8.375rem;
    transform: initial;
  }
  #gallery-1897 .cs-graphic-bottom {
    left: -7.5rem;
    transform: initial;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #gallery-1897 .cs-graphic-top {
    margin-left: 15rem;
    left: 50%;
  }
  #gallery-1897 .cs-graphic-bottom {
    margin-right: 16.25rem;
    right: 50%;
    left: initial;
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1897 {
    padding: var(--sectionPadding);
    background-color: #f6eddf;
    /* stops the cs-graphics from causing an overflow */
    overflow: hidden;
    position: relative;
  }
  #gallery-1897 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery-1897 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
  }
  #gallery-1897 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #gallery-1897 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #gallery-1897 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #gallery-1897 .cs-button-solid:hover {
    color: #fff;
  }
  #gallery-1897 .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1897 .cs-gallery {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    z-index: 1;
  }
  #gallery-1897 .cs-item {
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #faf6f2;
    /* 16px - 32px */
    border-radius: 1rem;
    display: grid;
    /* 8px - 16px */
    column-gap: clamp(0.5rem, 2vw, 1rem);
    row-gap: 1rem;
  }
  #gallery-1897 .cs-item-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    grid-column: span 2;
  }
  #gallery-1897 .cs-picture-group {
    /* 160px - 320px */
    min-height: clamp(10rem, 23vw, 20rem);
    overflow: hidden;
    border-radius: 1rem;
    grid-column: span 1;
    position: relative;
  }
  #gallery-1897 .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
  }
  #gallery-1897 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-1897 .cs-tag {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    border-radius: 1.875rem;
    position: absolute;
    /* 8px - 16px */
    bottom: clamp(0.5rem, 2vw, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    backdrop-filter: blur(8px);
  }
  #gallery-1897 .cs-graphic {
    /* 500px - 835px */
    width: clamp(31.25rem, 60vw, 52.1875rem);
    /* 453px - 757px */
    height: clamp(28.3125rem, 55vw, 47.3125rem);
    object-fit: cover;
    position: absolute;
    z-index: 0;
  }
  #gallery-1897 .cs-graphic-top {
    top: 0;
    right: -8.875rem;
  }
  #gallery-1897 .cs-graphic-bottom {
    bottom: 0;
    left: 0;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1897 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-1897 .cs-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  #gallery-1897 .cs-graphic-top {
    right: -8.375rem;
    transform: initial;
  }
  #gallery-1897 .cs-graphic-bottom {
    left: -7.5rem;
    transform: initial;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #gallery-1897 .cs-graphic-top {
    margin-left: 15rem;
    left: 50%;
  }
  #gallery-1897 .cs-graphic-bottom {
    margin-right: 16.25rem;
    right: 50%;
    left: initial;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery-1897 {
    background-color: var(--dark);
  }
  body.dark-mode #gallery-1897 .cs-title,
  body.dark-mode #gallery-1897 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery-1897 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #gallery-1897 .cs-graphic {
    opacity: 0.05;
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1897 {
        padding: var(--sectionPadding);
        background-color: #f6eddf;
        /* stops the cs-graphics from causing an overflow */
        overflow: hidden;
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
        }

        .cs-content {
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: (24/16rem);
            z-index: 1;
        }

        .cs-title {
            max-width: 25ch;
            margin: 0;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            min-width: (150/16rem);
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 (24/16rem);
            background-color: var(--secondary);
            overflow: hidden;
            color: #fff;
            border: none;
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                width: 0;
                height: 100%;
                background: #000;
                opacity: 1;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: #fff;

                &:before {
                    width: 100%;
                }
            }
        }

        .cs-gallery {
            width: 100%;
            display: grid;
            grid-auto-flow: row;
            /* 16px - 20px */
            gap: clamp(1rem, 2vw, 1.25rem);
            z-index: 1;
        }

        .cs-item {
            width: 100%;
            /* 16px - 32px */
            padding: clamp(1rem, 4vw, 2rem);
            background-color: #faf6f2;
            /* 16px - 32px */
            border-radius: (16/16rem);
            display: grid;
            /* 8px - 16px */
            column-gap: clamp(0.5rem, 2vw, 1rem);
            row-gap: (16/16rem);
        }

        .cs-item-text {
            font-size: (20/16rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: 0;
            color: var(--headerColor);
            grid-column: span 2;
        }

        .cs-picture-group {
            /* 160px - 320px */
            min-height: clamp(10rem, 23vw, 20rem);
            overflow: hidden;
            border-radius: (16/16rem);
            grid-column: span 1;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            display: block;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-tag {
            font-size: (14/16rem);
            line-height: 1.5em;
            padding: (4/16rem) (12/16rem);
            background: rgba(0, 0, 0, 0.24);
            color: var(--bodyTextColorWhite);
            border: 1px solid var(--bodyTextColorWhite);
            border-radius: (30/16rem);
            position: absolute;
            /* 8px - 16px */
            bottom: clamp(0.5rem, 2vw, 1rem);
            left: clamp(0.5rem, 2vw, 1rem);
            backdrop-filter: blur(8px);
        }

        .cs-graphic {
            /* 500px - 835px */
            width: clamp(31.25rem, 60vw, 52.1875rem);
            /* 453px - 757px */
            height: clamp(28.3125rem, 55vw, 47.3125rem);
            object-fit: cover;
            position: absolute;
            z-index: 0;
        }

        .cs-graphic-top {
            top: 0;
            right: (-142/16rem);
        }

        .cs-graphic-bottom {
            bottom: 0;
            left: 0;
        }
    }
}

/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-1897 {
        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }

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

        .cs-graphic-top {
            right: (-134/16rem);
            transform: initial;
        }

        .cs-graphic-bottom {
            left: (-120/16rem);
            transform: initial;
        }
    }
}

/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
    #gallery-1897 {
        .cs-graphic-top {
            margin-left: (240/16rem);
            left: 50%;
        }

        .cs-graphic-bottom {
            margin-right: (260/16rem);
            right: 50%;
            left: initial;
        }
    }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1897 {
        padding: var(--sectionPadding);
        background-color: #f6eddf;
        /* stops the cs-graphics from causing an overflow */
        overflow: hidden;
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
        }

        .cs-content {
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: (24/16rem);
            z-index: 1;
        }

        .cs-title {
            max-width: 25ch;
            margin: 0;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            min-width: (150/16rem);
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 (24/16rem);
            background-color: var(--secondary);
            overflow: hidden;
            color: #fff;
            border: none;
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                width: 0;
                height: 100%;
                background: #000;
                opacity: 1;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: #fff;

                &:before {
                    width: 100%;
                }
            }
        }

        .cs-gallery {
            width: 100%;
            display: grid;
            grid-auto-flow: row;
            /* 16px - 20px */
            gap: clamp(1rem, 2vw, 1.25rem);
            z-index: 1;
        }

        .cs-item {
            width: 100%;
            /* 16px - 32px */
            padding: clamp(1rem, 4vw, 2rem);
            background-color: #faf6f2;
            /* 16px - 32px */
            border-radius: (16/16rem);
            display: grid;
            /* 8px - 16px */
            column-gap: clamp(0.5rem, 2vw, 1rem);
            row-gap: (16/16rem);
        }

        .cs-item-text {
            font-size: (20/16rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: 0;
            color: var(--headerColor);
            grid-column: span 2;
        }

        .cs-picture-group {
            /* 160px - 320px */
            min-height: clamp(10rem, 23vw, 20rem);
            overflow: hidden;
            border-radius: (16/16rem);
            grid-column: span 1;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            display: block;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-tag {
            font-size: (14/16rem);
            line-height: 1.5em;
            padding: (4/16rem) (12/16rem);
            background: rgba(0, 0, 0, 0.24);
            color: var(--bodyTextColorWhite);
            border: 1px solid var(--bodyTextColorWhite);
            border-radius: (30/16rem);
            position: absolute;
            /* 8px - 16px */
            bottom: clamp(0.5rem, 2vw, 1rem);
            left: clamp(0.5rem, 2vw, 1rem);
            backdrop-filter: blur(8px);
        }

        .cs-graphic {
            /* 500px - 835px */
            width: clamp(31.25rem, 60vw, 52.1875rem);
            /* 453px - 757px */
            height: clamp(28.3125rem, 55vw, 47.3125rem);
            object-fit: cover;
            position: absolute;
            z-index: 0;
        }

        .cs-graphic-top {
            top: 0;
            right: (-142/16rem);
        }

        .cs-graphic-bottom {
            bottom: 0;
            left: 0;
        }
    }
}

/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-1897 {
        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }

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

        .cs-graphic-top {
            right: (-134/16rem);
            transform: initial;
        }

        .cs-graphic-bottom {
            left: (-120/16rem);
            transform: initial;
        }
    }
}

/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
    #gallery-1897 {
        .cs-graphic-top {
            margin-left: (240/16rem);
            left: 50%;
        }

        .cs-graphic-bottom {
            margin-right: (260/16rem);
            right: 50%;
            left: initial;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #gallery-1897 {
            background-color: var(--dark);

            .cs-title,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background-color: var(--medium);
            }

            .cs-graphic {
                opacity: 0.05;
            }
        }
    }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1897 {
        padding: var(--sectionPadding);
        background-color: #f6eddf;
        /* stops the cs-graphics from causing an overflow */
        overflow: hidden;
        position: relative;

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

        .cs-content {
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: calc(24/16 * 1rem);
            z-index: 1;
        }

        .cs-title {
            max-width: 25ch;
            margin: 0;
        }

        .cs-button-solid {
            font-size: calc(16/16 * 1rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            min-width: calc(150/16 * 1rem);
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 calc(24/16 * 1rem);
            background-color: var(--secondary);
            overflow: hidden;
            color: #fff;
            border: none;
            border-radius: calc(4/16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                width: 0;
                height: 100%;
                background: #000;
                opacity: 1;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: #fff;

                &:before {
                    width: 100%;
                }
            }
        }

        .cs-gallery {
            width: 100%;
            display: grid;
            grid-auto-flow: row;
            /* 16px - 20px */
            gap: clamp(1rem, 2vw, 1.25rem);
            z-index: 1;
        }

        .cs-item {
            width: 100%;
            /* 16px - 32px */
            padding: clamp(1rem, 4vw, 2rem);
            background-color: #faf6f2;
            /* 16px - 32px */
            border-radius: calc(16/16 * 1rem);
            display: grid;
            /* 8px - 16px */
            column-gap: clamp(0.5rem, 2vw, 1rem);
            row-gap: calc(16/16 * 1rem);
        }

        .cs-item-text {
            font-size: calc(20/16 * 1rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: 0;
            color: var(--headerColor);
            grid-column: span 2;
        }

        .cs-picture-group {
            /* 160px - 320px */
            min-height: clamp(10rem, 23vw, 20rem);
            overflow: hidden;
            border-radius: calc(16/16 * 1rem);
            grid-column: span 1;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            display: block;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-tag {
            font-size: calc(14/16 * 1rem);
            line-height: 1.5em;
            padding: calc(4/16 * 1rem) calc(12/16 * 1rem);
            background: rgba(0, 0, 0, 0.24);
            color: var(--bodyTextColorWhite);
            border: 1px solid var(--bodyTextColorWhite);
            border-radius: calc(30/16 * 1rem);
            position: absolute;
            /* 8px - 16px */
            bottom: clamp(0.5rem, 2vw, 1rem);
            left: clamp(0.5rem, 2vw, 1rem);
            backdrop-filter: blur(8px);
        }

        .cs-graphic {
            /* 500px - 835px */
            width: clamp(31.25rem, 60vw, 52.1875rem);
            /* 453px - 757px */
            height: clamp(28.3125rem, 55vw, 47.3125rem);
            object-fit: cover;
            position: absolute;
            z-index: 0;
        }

        .cs-graphic-top {
            top: 0;
            right: calc(-142/16 * 1rem);
        }

        .cs-graphic-bottom {
            bottom: 0;
            left: 0;
        }
    }
}

/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-1897 {
        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }

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

        .cs-graphic-top {
            right: calc(-134/16 * 1rem);
            transform: initial;
        }

        .cs-graphic-bottom {
            left: calc(-120/16 * 1rem);
            transform: initial;
        }
    }
}

/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
    #gallery-1897 {
        .cs-graphic-top {
            margin-left: calc(240/16 * 1rem);
            left: 50%;
        }

        .cs-graphic-bottom {
            margin-right: calc(260/16 * 1rem);
            right: 50%;
            left: initial;
        }
    }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1897 {
        padding: var(--sectionPadding);
        background-color: #f6eddf;
        /* stops the cs-graphics from causing an overflow */
        overflow: hidden;
        position: relative;

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

        .cs-content {
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: calc(24/16 * 1rem);
            z-index: 1;
        }

        .cs-title {
            max-width: 25ch;
            margin: 0;
        }

        .cs-button-solid {
            font-size: calc(16/16 * 1rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            min-width: calc(150/16 * 1rem);
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 calc(24/16 * 1rem);
            background-color: var(--secondary);
            overflow: hidden;
            color: #fff;
            border: none;
            border-radius: calc(4/16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                width: 0;
                height: 100%;
                background: #000;
                opacity: 1;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: #fff;

                &:before {
                    width: 100%;
                }
            }
        }

        .cs-gallery {
            width: 100%;
            display: grid;
            grid-auto-flow: row;
            /* 16px - 20px */
            gap: clamp(1rem, 2vw, 1.25rem);
            z-index: 1;
        }

        .cs-item {
            width: 100%;
            /* 16px - 32px */
            padding: clamp(1rem, 4vw, 2rem);
            background-color: #faf6f2;
            /* 16px - 32px */
            border-radius: calc(16/16 * 1rem);
            display: grid;
            /* 8px - 16px */
            column-gap: clamp(0.5rem, 2vw, 1rem);
            row-gap: calc(16/16 * 1rem);
        }

        .cs-item-text {
            font-size: calc(20/16 * 1rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: 0;
            color: var(--headerColor);
            grid-column: span 2;
        }

        .cs-picture-group {
            /* 160px - 320px */
            min-height: clamp(10rem, 23vw, 20rem);
            overflow: hidden;
            border-radius: calc(16/16 * 1rem);
            grid-column: span 1;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: 100%;
            display: block;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-tag {
            font-size: calc(14/16 * 1rem);
            line-height: 1.5em;
            padding: calc(4/16 * 1rem) calc(12/16 * 1rem);
            background: rgba(0, 0, 0, 0.24);
            color: var(--bodyTextColorWhite);
            border: 1px solid var(--bodyTextColorWhite);
            border-radius: calc(30/16 * 1rem);
            position: absolute;
            /* 8px - 16px */
            bottom: clamp(0.5rem, 2vw, 1rem);
            left: clamp(0.5rem, 2vw, 1rem);
            backdrop-filter: blur(8px);
        }

        .cs-graphic {
            /* 500px - 835px */
            width: clamp(31.25rem, 60vw, 52.1875rem);
            /* 453px - 757px */
            height: clamp(28.3125rem, 55vw, 47.3125rem);
            object-fit: cover;
            position: absolute;
            z-index: 0;
        }

        .cs-graphic-top {
            top: 0;
            right: calc(-142/16 * 1rem);
        }

        .cs-graphic-bottom {
            bottom: 0;
            left: 0;
        }
    }
}

/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-1897 {
        .cs-content {
            text-align: left;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }

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

        .cs-graphic-top {
            right: calc(-134/16 * 1rem);
            transform: initial;
        }

        .cs-graphic-bottom {
            left: calc(-120/16 * 1rem);
            transform: initial;
        }
    }
}

/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
    #gallery-1897 {
        .cs-graphic-top {
            margin-left: calc(240/16 * 1rem);
            left: 50%;
        }

        .cs-graphic-bottom {
            margin-right: calc(260/16 * 1rem);
            right: 50%;
            left: initial;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #gallery-1897 {
            background-color: var(--dark);

            .cs-title,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background-color: var(--medium);
            }

            .cs-graphic {
                opacity: 0.05;
            }
        }
    }
}

: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);
}