@media only screen and (min-width: 0rem) {#sbs-867 {padding: var(--sectionPadding);}#sbs-867 .cs-container {width: 100%;max-width: 34.375rem;margin: auto;display: flex;flex-direction: column;align-items: center;gap: clamp(3rem, 7vw, 4rem);}#sbs-867 .cs-content {text-align: left;width: 100%;max-width: 33.875rem;box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;}#sbs-867 .cs-title {max-width: 17ch;}#sbs-867 .cs-text {margin-bottom: 1rem;}#sbs-867 .cs-text:last-of-type {margin-bottom: 2rem;}#sbs-867 .cs-picture {display: block;position: relative;width: 100%;max-width: 39.375rem;height: clamp(25rem, 70vw, 48.4375rem);overflow: hidden;}#sbs-867 .cs-picture img {position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit: cover;border-radius: 1.5em;}}@media only screen and (min-width: 64rem) {#sbs-867 {padding: var(--sectionPadding);}#sbs-867 .cs-container {flex-direction: row;max-width: 80rem;justify-content: space-between;}#sbs-867 .cs-content {width: 53%;padding: 0;}#sbs-867 .cs-picture {width: 47vw;position: relative;}}@media only screen and (min-width: 0rem) {body.dark-mode #sbs-867 .cs-topper {color: var(--secondary);}body.dark-mode #sbs-867 .cs-title, body.dark-mode #sbs-867 .cs-text {color: var(--bodyTextColorWhite);}body.dark-mode #sbs-867 .cs-text {opacity: 0.8;}body.dark-mode #sbs-867 .cs-picture:before {background-color: var(--accent);}}#quote-827 {width: 100%;max-width: 39.375rem;margin: 0 0 2rem 0;padding: clamp(1rem, 3vw, 2rem);background-color: var(--sectionColor);border-radius: 1rem;position: relative;}#quote-827 .cs-quote-text {font-size: clamp(0.875rem, 1.5vw, 1rem);line-height: 1.5em;width: 100%;max-width: 31.25rem;margin: 0 0 1rem;color: #767676;display: block;}#quote-827 .cs-name {font-size: 1rem;line-height: 1.2em;text-transform: uppercase;font-weight: bold;width: 100%;margin: 0 0 0.25rem;color: var(--headerColor);display: block;}#quote-827 .cs-job {font-size: 0.875rem;line-height: 1.5em;color: #767676;display: block;}#quote-827 .cs-quote-icon {width: clamp(3.75rem, 10vw, 8.5rem);height: auto;position: absolute;bottom: 0;right: clamp(1rem, 4vw, 2rem);}body.dark-mode #quote-827 {background-color: var(--accent);}body.dark-mode #quote-827 .cs-quote-text, body.dark-mode #quote-827 .cs-name {color: var(--bodyTextColorWhite);}body.dark-mode #quote-827 .cs-job {color: var(--bodyTextColorWhite);opacity: 0.8;}body.dark-mode #quote-827 .cs-quote-icon {opacity: 0.2;} stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
#quote-827 {
  width: 100%;
  max-width: 39.375rem;
  margin: 0 0 2rem 0;
  /* 16px - 32px */
  padding: clamp(1rem, 3vw, 2rem);
  background-color: var(--sectionColor);
  border-radius: 1rem;
  position: relative;
}
#quote-827 .cs-quote-text {
  /* 14px - 16px */
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.5em;
  width: 100%;
  max-width: 31.25rem;
  margin: 0 0 1rem;
  color: #767676;
  display: block;
}
#quote-827 .cs-name {
  font-size: 1rem;
  line-height: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  margin: 0 0 0.25rem;
  color: var(--headerColor);
  display: block;
}
#quote-827 .cs-job {
  font-size: 0.875rem;
  line-height: 1.5em;
  color: #767676;
  display: block;
}
#quote-827 .cs-quote-icon {
  /* 60px - 136px */
  width: clamp(3.75rem, 10vw, 8.5rem);
  height: auto;
  position: absolute;
  bottom: 0;
  /* 16px - 32px */
  right: clamp(1rem, 4vw, 2rem);
}
/* Dark Mode, copy and paste only the styles inside the #list-827 brackets into your section's dark mode media query */
body.dark-mode #quote-827 {
  background-color: var(--accent);
}
body.dark-mode #quote-827 .cs-quote-text,
body.dark-mode #quote-827 .cs-name {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #quote-827 .cs-job {
  color: var(--bodyTextColorWhite);
  opacity: 0.8;
}
body.dark-mode #quote-827 .cs-quote-icon {
  opacity: 0.2;
}