.about__hero {
  display: grid;
  place-content: center;
  position: relative;
  width: 100%;
  min-height: 600px;
}

.about__hero:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
}

.about__hero-header {
  position: relative;
  min-width: 100%;
  margin-inline: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;

  text-align: center;
  color: white;
}

.about__hero-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10rem;
  height: 5px;

  transform: translateX(-50%);
  background-color: white;
}

.about__hero picture {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 600px;
  z-index: -1;
}

.about__hero img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 100%;
  min-height: 600px;
}

.about__section-1 {
  margin-inline: auto;
  padding: 2rem 0;
}

.section__image-box {
  position: relative;
  width: clamp(325px, 19.737vw + 14.803rem, 450px);
  aspect-ratio: 3 / 4;
  margin: 2rem 0 2rem;
  margin-inline: auto;
}

.section__image-box img {
  height: 100%;
}

.section__image-box::before {
  content: "";
  position: absolute;
  display: block;
  top: 5%;
  left: -5%;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -1;

  background-color: firebrick;
}

.about__values {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.about__values > * {
  flex: 1 1 275px;
  padding-top: 2rem;

  border-top: white solid 1px;
  transition: 300ms;
}

.value:hover {
  border-top: firebrick solid 1px;
}

.span__parent {
  display: inline-block;
  font-size: 0;
}

.about__section-1 span {
  display: inline-block;

  color: darkred;
  font-weight: 900;
  font-style: italic;
  font-size: var(--fs-paragraph);
}

.about__section-1 p {
  padding-bottom: 1rem;
}

.about__section-1 button {
  margin-bottom: 1rem;
}