.oxy-rich-text p:not(:last-child) {
  margin-block-end: 1.5rem;
}

#componentHero {
  --init-h: 22.5rem;
  height: min(40lvh, var(--height, var(--init-h)));
  background: var(--clr-text) no-repeat center/cover;
}

.component.hero {
  --init-h: 22.5rem;
  height: min(40lvh, var(--height, var(--init-h)));
  background: var(--clr-text) no-repeat center/cover;
}

.component.block-headline {
  --default-pb: 3rem;
  --default-pi: 1rem;
  --default-alignment: center;
  --default-mb: -5rem 2rem;
  --default-mi: auto;
  --default-width: min(100%, var(--mw-100));
  display: flex;
  width: var(--width, var(--default-width));
  text-align: var(--alignment, var(--default-alignment));
  background-color: var(--clr-w);
  border-radius: var(--radius-700);
  gap: 2rem;
  margin-block: var(--mb, var(--default-mb));
  flex-direction: column;
  padding-block: var(--pb, var(--default-pb));
  padding-inline: var(--pi, var(--default-pi));
  margin-inline: var(--mi, var(--default-mi));
}
@media only screen and (min-width: 48rem) {
  .component.block-headline {
    --pi: 2rem;
  }
}
.component.block-headline h1,
.component.block-headline h2,
.component.block-headline h3,
.component.block-headline h4 {
  width: 100%;
}
.component.block-headline .button {
  margin-block-start: 1rem;
}

.card-color {
  --def-bg: var(--bg, var(--clr-secondary));
  --def-color: var(--color, var(--clr-w));
  --def-pb: var(--pb, 2rem);
  --def-pi: var(--pi, 2rem);
  --def-gap: var(--gap, 1rem);
  --def-radius: var(--radius, 0.5rem);
  --def-shadow: var(--shadow, var(--shadow-500));
  --def-border: var(--border, 0.25rem solid var(--clr-w));
  display: flex;
  color: var(--def-color);
  background-color: var(--def-bg);
  border: var(--def-border);
  border-radius: var(--def-radius);
  box-shadow: var(--def-shadow);
  gap: var(--def-gap);
  flex-direction: column;
  padding-block: var(--def-pb);
  padding-inline: var(--def-pi);
}
.card-color h1,
.card-color h2,
.card-color h3,
.card-color h4 {
  color: inherit;
}

.card-testimonial {
  padding: 2rem;
  background-color: var(--clr-w);
  border-radius: var(--radius-400);
}
.card-testimonial--stars {
  width: min(100%, 15rem);
}
.card-testimonial--face {
  display: block;
  width: 100%;
  border-radius: 100%;
  object-fit: cover;
}
.card-testimonial footer {
  display: grid;
  width: 100%;
  grid-template-columns: 3rem 1fr;
  grid-column-gap: 0.75rem;
}

.component--cta-sec {
  position: relative;
  z-index: 1;
  min-height: 33.33lvh;
  color: var(--clr-w);
  background: url("../images/cta--default-bg.jpg") no-repeat center center/cover;
  justify-content: center;
  padding-block: var(--fspc-300);
}
.component--cta-sec::before {
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  content: "";
  inset: 0 0 0 0;
  backdrop-filter: blur(0.125rem);
}
.component--cta-sec h3 {
  color: inherit;
}
.component--cta-sec p {
  margin-block-start: 2rem;
  font-size: var(--fs-500);
}
.component--cta-sec .row-400 {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr;
  grid-gap: 2rem var(--fspc-300);
}
@media only screen and (min-width: 48rem) {
  .component--cta-sec .row-400 {
    grid-template-columns: 7fr minmax(15rem, 5fr);
  }
}
@media only screen and (min-width: 48rem) {
  .component--cta-sec .button {
    margin-inline: auto;
  }
}

#gallery {
  display: grid;
  margin-block-start: calc(var(--fspc-300) * -1);
  margin-block-end: var(--fspc-700);
  align-items: stretch;
  grid-template-columns: 1fr;
  grid-gap: 1rem 1rem;
}
@media only screen and (min-width: 48rem) {
  #gallery {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 62rem) {
  #gallery {
    grid-template-columns: minmax(12rem, 3fr) 4.5fr 4.5fr;
  }
}
#gallery > div {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
@media only screen and (min-width: 36rem) {
  #gallery > div {
    height: 100%;
  }
}
#gallery > div:first-child {
  width: 100%;
  flex-direction: column;
}
@media only screen and (min-width: 36rem) {
  #gallery > div:first-child {
    flex-direction: row;
  }
}
@media only screen and (min-width: 48rem) {
  #gallery > div:first-child {
    width: 100%;
    flex-direction: row;
    grid-column: 1/span 2;
  }
}
@media only screen and (min-width: 62rem) {
  #gallery > div:first-child {
    flex-direction: column;
    grid-column: span 1;
  }
}
@media only screen and (min-width: 36rem) {
  #gallery > div:first-child img {
    width: 50%;
    height: min(25lvh, 15rem);
  }
}
@media only screen and (min-width: 48rem) {
  #gallery > div:first-child img {
    width: 100%;
  }
}
#gallery img {
  width: 100%;
  border: 0.5rem solid var(--clr-w);
  border-radius: var(--radius-400);
  box-shadow: var(--shadow-500);
  object-fit: cover;
}
@media only screen and (min-width: 36rem) {
  #gallery img {
    height: 100%;
  }
}

#story {
  display: grid;
  margin-block-end: var(--fspc-700);
  grid-template-columns: 1fr;
  grid-gap: 3rem var(--fspc-300);
}
@media only screen and (min-width: 48rem) {
  #story {
    grid-template-columns: minmax(22.5rem, 4.5fr) 7fr;
  }
}

#timeline {
  display: grid;
  position: relative;
  grid-gap: 2rem 2rem;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 36rem) {
  #timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 62rem) {
  #timeline {
    grid-template-columns: repeat(4, 1fr);
  }
}
#timeline::before {
  --border: 0.063rem dashed var(--clr-text);
  position: absolute;
  left: 50%;
  z-index: 1;
  height: 100%;
  border-left: var(--border);
  transform: translateX(-50%);
  content: "";
}
@media only screen and (min-width: 36rem) {
  #timeline::before {
    left: 50%;
    width: 50%;
    transform: translateX(-50%);
    border-inline: var(--border);
  }
}
@media only screen and (min-width: 62rem) {
  #timeline::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.063rem;
    border-top: var(--border);
    transform: translateY(-50%);
  }
}
#timeline .card-color {
  position: relative;
  z-index: 1;
}

#testimonials {
  display: grid;
  width: min(100%, var(--mw-300));
  grid-template-columns: 1fr;
  grid-gap: 3rem var(--fspc-300);
  padding-block: 0 var(--fspc-700);
}
@media only screen and (min-width: 62rem) {
  #testimonials {
    grid-template-columns: minmax(25rem, 1fr) 3fr;
  }
}
#testimonials .card-testimonial {
  border: 0.063rem solid var(--clr-neutral-200);
  box-shadow: var(--shadow-500);
}

#testimonialColumn {
  gap: 2rem;
  grid-row: 2;
}
@media only screen and (min-width: 62rem) {
  #testimonialColumn {
    margin-block-start: calc(var(--fspc-300) * -1);
    grid-row: auto;
  }
}

#blob {
  position: static;
  padding-block-start: var(--fspc-700);
  padding-block-end: 3rem;
}
@media only screen and (min-width: 62rem) {
  #blob {
    position: sticky;
    top: 0;
    padding-block-end: var(--fspc-700);
  }
}

#clients {
  width: min(100%, var(--mw-500));
}
#clients h2 {
  margin-block-end: 3rem;
  width: min(100%, 60rem);
  text-align: center;
  margin-inline: auto;
  text-wrap: balance;
}

#clientsList {
  --col-count: 1;
  --max-width: 12rem;
  display: grid;
  width: 100%;
  align-items: center;
  grid-gap: 2rem 2rem;
  grid-template-columns: repeat(var(--col-count), 1fr);
}
@media only screen and (min-width: 36rem) {
  #clientsList {
    --col-count: 2;
  }
}
@media only screen and (min-width: 48rem) {
  #clientsList {
    --col-count: 3;
  }
}
@media only screen and (min-width: 62rem) {
  #clientsList {
    --col-count: 6;
  }
}

.component.block-headline {
  --alignment: left;
  --mi: 0 auto;
  --mb: -5rem 0;
  --width: min(100%, var(--mw-400));
  --pi: 1rem;
  --pb: 2rem;
}
@media only screen and (min-width: 36rem) {
  .component.block-headline {
    --pi: 2rem;
  }
}
@media only screen and (min-width: 62rem) {
  .component.block-headline {
    --pi: 3rem;
    --pb: 3rem;
  }
}

#headline {
  padding-block-end: var(--fspc-400);
}

#top {
  padding-block: 0 calc(var(--fspc-700) + var(--fspc-300));
}

#bottom {
  padding-block: var(--fspc-700);
}

/*# sourceMappingURL=about.css.map */