/*
 * About sectie - "Over Eggink" tekst + stats + afbeelding, met groot achtergrond-getal
 */

.about {
  padding:    110px 0;
  background: var(--color-bg-white);
  position:   relative;
  overflow:   hidden;
}

.about__bg-num {
  position:        absolute;
  right:           -40px;
  top:             40px;
  font-family:     var(--font-heading);
  font-size:       320px;
  font-weight:     var(--font-extrabold);
  color:           #f5f3ec;
  letter-spacing:  -8px;
  line-height:     1;
  user-select:     none;
  pointer-events:  none;
  z-index:         0;
}

.about__inner {
  position:              relative;
  z-index:               1;
  max-width:             var(--container-max);
  margin:                0 auto;
  padding:               0 var(--section-padding-x);
  display:               grid;
  grid-template-columns: 1.05fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.about__text-eyebrow {
  display:         inline-block;
  color:           var(--color-accent);
  font-size:       12px;
  font-weight:     var(--font-bold);
  letter-spacing:  2px;
  text-transform:  uppercase;
  margin-bottom:   14px;
}

.about__title {
  font-family:     var(--font-heading);
  font-size:       48px;
  font-weight:     var(--font-extrabold);
  margin:          0 0 22px;
  color:           var(--color-text-heading);
  letter-spacing:  -1.5px;
  line-height:     1.05;
}

.about__title-accent {
  color: var(--color-accent);
}

.about__lead,
.about__body p {
  font-size:   15px;
  color:       var(--color-text-meta);
  line-height: 1.7;
  margin:      0 0 14px;
}

.about__lead {
  font-weight: var(--font-medium);
}

.about__stats {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
  margin-top:            32px;
}

.about__stat {
  padding:       20px 22px;
  background:    var(--color-bg-section);
  border-radius: 14px;
}

.about__stat-num {
  font-family:     var(--font-heading);
  font-size:       30px;
  font-weight:     var(--font-extrabold);
  color:           var(--color-accent);
  line-height:     1;
  margin-bottom:   6px;
  letter-spacing:  -1px;
}

.about__stat-label {
  font-size:   13px;
  color:       #5a6469;
  font-weight: 500;
}

.about__media {
  border-radius: 24px;
  overflow:      hidden;
  aspect-ratio:  4 / 5;
  background:    var(--color-bg-lighter);
}

.about__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

@media (max-width: 1024px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap:                   48px;
  }
  .about__media {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 768px) {
  .about {
    padding: 72px 0;
  }
  .about__bg-num {
    font-size: 200px;
    right:     -20px;
    top:       20px;
  }
  .about__title {
    font-size:      32px;
    letter-spacing: -0.8px;
  }
  .about__stats {
    grid-template-columns: 1fr;
  }
}