/*-- -------------------------- -->
<---      Why Choose 1635       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1635 {
    padding: var(--sectionPadding);
  }
  #why-choose-1635 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }
  #why-choose-1635 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1635 .cs-flex {
    max-width: 38.5rem;
  }
  #why-choose-1635 .cs-title {
    max-width: 20ch;
  }
  #why-choose-1635 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1635 .cs-text:last-of-type {
    margin-bottom: 0;
  }
  #why-choose-1635 .cs-wrapper {
    width: 100%;
  }
  #why-choose-1635 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #why-choose-1635 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }
  #why-choose-1635 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1635 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
    /* changes color of svg icon */
    fill: var(--primary);
  }
  #why-choose-1635 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    text-align: inherit;
  }
  #why-choose-1635 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #why-choose-1635 .cs-wrapper {
    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
    display: contents;
  }
  #why-choose-1635 .cs-image-group {
    font-size: min(2.7vw, 1em);
    width: 33.875em;
    height: 30.875em;
    /* sends it to teh top in the 1st position */
    order: -1;
    position: relative;
    z-index: 1;
  }
  #why-choose-1635 .cs-picture-wrapper {
    width: 80.073801%;
    height: 83.805668%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #why-choose-1635 .cs-box {
    width: 60%;
    margin-top: -2.375em;
    margin-left: 1.5em;
    padding: 1em;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 10;
  }
  #why-choose-1635 .cs-header {
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #why-choose-1635 .cs-desc {
    font-size: 0.875em;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #why-choose-1635 .cs-picture {
    position: relative;
    z-index: 1;
  }
  #why-choose-1635 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1em;
  }
  #why-choose-1635 .cs-picture1 {
    width: 100%;
    height: 100%;
  }
  #why-choose-1635 .cs-picture2 {
    width: 36.346863%;
    height: 39.878543%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1635 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1635 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1635 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #why-choose-1635 .cs-title {
    margin: 0;
  }
  #why-choose-1635 .cs-h3,
  #why-choose-1635 .cs-item-text {
    text-align: left;
  }
  #why-choose-1635 .cs-item {
    grid-column: span 4;
  }
  #why-choose-1635 .cs-image-group {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1635 {
    /* set the darker background color on the main div */
    background-color: var(--sectionColor);
    overflow: hidden;
  }
  #why-choose-1635 .cs-content {
    align-items: flex-start;
  }
  #why-choose-1635 .cs-flex {
    width: 50%;
  }
  #why-choose-1635 .cs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #why-choose-1635 .cs-wrapper:before {
    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
    content: '';
    width: 100vw;
    height: 100vw;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1635 .cs-card-group {
    max-width: 39.375rem;
    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
    padding-top: 3rem;
    align-self: flex-start;
  }
  #why-choose-1635 .cs-image-group {
    width: 33.875em;
    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
    height: auto;
    min-height: 30.875em;
    /* makes it overlap the .cs-wrapper div */
    margin-top: -3rem;
    flex: none;
  }
  #why-choose-1635 .cs-item {
    grid-column: span 12;
    flex-direction: row;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1635 {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #why-choose-1635 .cs-title,
  body.dark-mode #why-choose-1635 .cs-text,
  body.dark-mode #why-choose-1635 .cs-h3,
  body.dark-mode #why-choose-1635 .cs-item-text,
  body.dark-mode #why-choose-1635 .cs-header {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-1635 .cs-text,
  body.dark-mode #why-choose-1635 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #why-choose-1635 .cs-box {
    background-color: var(--dark);
    position: relative;
    z-index: 1;
  }
  body.dark-mode #why-choose-1635 .cs-box:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  body.dark-mode #why-choose-1635 .cs-wrapper:before {
    background-color: var(--dark);
  }
}
/*-- -------------------------- -->
<---       Services 877         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-877 {
    padding: var(--sectionPadding);
  }
  #services-877 .cs-container {
    width: 100%;
    /* changes to 1280px at Tablet */
    max-width: 49rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-877 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services-877 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  #services-877 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    border-radius: 1rem;
    background-color: #fff;
    overflow: hidden;
    grid-column: span 3;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #services-877 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: translateY(-0.4375rem);
  }
  #services-877 .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #services-877 .cs-item:hover .cs-h3 {
    color: var(--secondary);
  }
  #services-877 .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-877 .cs-link {
    text-decoration: none;
    padding: 0 0 1.25rem 0;
    display: block;
  }
  #services-877 .cs-picture {
    width: 100%;
    height: 12.5rem;
    margin-bottom: 1.25rem;
    background-color: var(--secondary);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #services-877 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-877 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color 0.3s;
  }
  #services-877 .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    padding: 0 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-877 .cs-container {
    max-width: 80rem;
  }
  #services-877 .cs-item {
    grid-column: span 1;
    max-width: 28.875rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-877 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #services-877 .cs-title,
  body.dark-mode #services-877 .cs-text,
  body.dark-mode #services-877 .cs-h3,
  body.dark-mode #services-877 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-877 .cs-text,
  body.dark-mode #services-877 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-877 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #services-877 .cs-item:before {
    opacity: 0.3;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1007 {
    padding: var(--sectionPadding);
    padding-top: 0;
  }
  #sbsr-1007 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-1007 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    /* changes to 522px at desktop */
    max-width: 36.125rem;
    margin-top: -1rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-1007 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-1007 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-1007 .cs-spacer {
    width: 100%;
    /* 16px - 24px */
    height: clamp(1rem, 3vw, 1.5rem);
    display: block;
  }
  #sbsr-1007 .cs-image-group {
    width: 100%;
  }
  #sbsr-1007 .cs-picture {
    width: 100%;
    height: 16.3125rem;
    border: 12px solid #fff;
    background-color: #fff;
    display: block;
    position: relative;
  }
  #sbsr-1007 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it behave like a background image */
    object-fit: cover;
    border-radius: 1em;
  }
  #sbsr-1007 .cs-seal {
    /* changes to a clamp(104px - 190px) at desktop */
    width: 6.5rem;
    height: auto;
    /* 104px - 190px */
    /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
    margin-top: calc(clamp(6.5rem, 12vw, 11.875rem)*-.5);
    margin-left: auto;
    /* 28px - 120px */
    margin-right: clamp(1.75rem, 10vw, 7.5rem);
    background-color: #fff;
    border: clamp(6px, 0.8vw, 12px) solid #fff;
    border-radius: 50%;
    display: block;
    position: relative;
    /* make it rest on top of the bg picture */
    z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-1007 .cs-container {
    align-items: flex-start;
  }
  #sbsr-1007 .cs-flex-group {
    flex-direction: row;
  }
  #sbsr-1007 .cs-text {
    columns: 2;
    column-gap: 1.5rem;
  }
  #sbsr-1007 .cs-spacer {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-1007 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    /* 100px - 200px */
    gap: clamp(6.25rem, 13vw, 12.5rem);
  }
  #sbsr-1007 .cs-image-group {
    max-width: 33.875rem;
    display: flex;
    justify-content: flex-end;
    position: relative;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-1007 .cs-picture {
    height: 28.75rem;
    aspect-ratio: initial;
  }
  #sbsr-1007 .cs-seal {
    /* 104 - 190px */
    width: clamp(6.5rem, 13vw, 11.875rem);
    margin: 0;
    position: absolute;
    top: 50%;
    /* subtract 12px (.75rem) to account for the border */
    left: calc((clamp(6.5rem, 13vw, 11.875rem)*-.5) + -.75rem);
    transform: translateY(-50%);
  }
  #sbsr-1007 .cs-content {
    flex: none;
    width: 54%;
    max-width: 33.875rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-1007 .cs-title,
  body.dark-mode #sbsr-1007 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-1007 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbsr-1007 .cs-picture {
    border-color: var(--dark);
    background-color: var(--dark);
  }
  body.dark-mode #sbsr-1007 .cs-seal {
    border-color: var(--dark);
    background-color: var(--dark);
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-567 {
    padding: var(--sectionPadding);
    padding-top: 0;
  }
  #reviews-567 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Change from flex-start to center */
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-567 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #reviews-567 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-567 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* 32px - 60px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
    background-color: var(--sectionColor);
    border-radius: 1em;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-567 .cs-stars {
    /* 169px - 189px */
    width: clamp(10.5625rem, 20vw, 11.8125rem);
    height: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
    display: block;
  }
  #reviews-567 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    /* 40px - 64px */
    margin-bottom: clamp(2.5rem, 8vw, 4rem);
    color: var(--bodyTextColor);
  }
  #reviews-567 .cs-flex-group {
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews-567 .cs-profile {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
    padding: 1rem;
    background-color: #fff;
  }
  #reviews-567 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-567 .cs-name {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-567 .cs-container {
    max-width: 80rem;
  }
  #reviews-567 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two columns */
    gap: clamp(1rem, 2.5vw, 1.15rem);
    width: 100%;
  }
  #reviews-567 .cs-item {
    width: 100%;
    /* Take full width of grid cell */
    max-width: 100%;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-567 .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
    /* Three columns on desktop */
  }
  #reviews-567 .cs-item {
    width: 100%;
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type {
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    text-align: left;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-567 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #reviews-567 .cs-title,
  body.dark-mode #reviews-567 .cs-text,
  body.dark-mode #reviews-567 .cs-item-text,
  body.dark-mode #reviews-567 .cs-name,
  body.dark-mode #reviews-567 .cs-job {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-567 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #reviews-567 .cs-item {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-402 {
    padding: var(--sectionPadding);
    background-color: var(--sectionColor);
  }
  #gallery-402 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-402 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #gallery-402 .cs-gallery {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #gallery-402 .cs-image {
    width: 47%;
    border-radius: 1.25rem;
    display: block;
    position: relative;
    /* clips the image corners */
    overflow: hidden;
    aspect-ratio: 1;
  }
  #gallery-402 .cs-image img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-402 .cs-container {
    max-width: 80rem;
  }
  #gallery-402 .cs-image {
    width: 31.8%;
    max-width: 18.75rem;
    aspect-ratio: 1;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #gallery-402 .cs-gallery {
    justify-content: center;
    align-items: stretch;
  }
  #gallery-402 .cs-image {
    width: 39.375rem;
    max-width: 100%;
    height: 25rem;
  }
  #gallery-402 .cs-image:nth-of-type(2),
  #gallery-402 .cs-image:nth-of-type(3),
  #gallery-402 .cs-image:nth-of-type(4),
  #gallery-402 .cs-image:nth-of-type(5) {
    width: 19.0625rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery-402 {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #gallery-402 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #gallery-402 .cs-title,
  body.dark-mode #gallery-402 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery-402 .cs-text {
    opacity: 0.8;
  }
}