:root {
  --hero-height: calc(100vh - var(--header-height));
  --color: var(--color-light);
  --title-font-size: 3.5rem;
  --subtitle-font-size: 2.5rem;
  --content-font-size: 1rem;
  --title-font-weight: 300;
  --content-font-weight: 400;

	--double-div-height: 400px;
}
body {
  scroll-behavior: smooth;
}
.about__hero {
  height: var(--hero-height);
}

.about__hero img {
  filter: brightness(0.7);
}

.hero__content {
  gap: var(--spacing);
  color: var(--color);
  padding: 0 var(--spacing-l);
}

.hero__content h2,
.about__content--double-div h2,
.about__content--text-in-center h2 {
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
}

.about__content--double-div h2 {
  font-size: var(--subtitle-font-size);
}

.hero__content p {
  font-size: var(--content-font-size);
  font-weight: var(--content-font-weight);
}

.about__content-wrapper {
  gap: 50px;
  padding: 100px 0;
}

.about__content--double-div p,
.about__content--text-in-center p {
  font-size: var(--content-font-size);
  font-weight: var(--content-font-weight);
  line-height: 30px;
}

.about__content--double-div {
  height: var(--double-div-height);
  padding: var(--spacing-l);
  gap: var(--spacing-l);
}

@media (max-width: 900px) {
  .about__content--double-div {
		height: calc(var(--double-div-height) * 2);

  }
}
.about__content--parallax,
.about__content--text-in-center {
  background-color: #333;
}

.about__content--double-div .double-div__content--text {
  gap: 30px;
}

.about__content--double-div .double-div__content--media {
  border-radius: 10px;
  z-index: 2;
  overflow: hidden;
}

.about__content--double-div .double-div__content--media img {
  z-index: 1;
}
.div--blank {
  padding: 100px;
}