.page-about {
  padding-block: var(--page-top) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.page-about > .section-heading {
  margin-block-end: 0;
}

.page-about .image-text {
  align-items: center;
}

.page-about .image-text-media {
  position: relative;
  width: min(320px, 84%);
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

.page-about .image-text-media::before {
  content: '';
  position: absolute;
  inset: 12% -10% -6% -12%;
  border-radius: var(--radius-organic);
  background: var(--color-band);
  transform: rotate(5deg);
}

.page-about .image-text-media::after {
  content: '';
  position: absolute;
  inset-block-end: -7%;
  inset-inline-end: -16%;
  width: 36%;
  aspect-ratio: 360 / 300;
  background: var(--color-sketch);
  -webkit-mask: url('/assets/images/sketch-cherries.webp') center / contain no-repeat;
  mask: url('/assets/images/sketch-cherries.webp') center / contain no-repeat;
  transform: rotate(-10deg);
}

.page-about .image-text-media img {
  position: relative;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-arch);
  box-shadow: var(--shadow-soft);
}

.page-about .image-text-content {
  max-width: 34rem;
  gap: var(--space-4);
}

.page-about .image-text-content p {
  font-size: var(--text-md);
}

.page-about .image-text-content > p:first-child {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
}

.page-about .image-text-content > p:last-child {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-accent);
}

@media (min-width: 600px) {
  .page-about .image-text {
    justify-content: center;
    gap: clamp(var(--space-7), 8vw, var(--space-9));
  }

  .page-about .image-text-media {
    flex: 0 1 380px;
    margin: 0;
  }

  .page-about .image-text-content {
    flex: 0 1 34rem;
  }

  .page-about .image-text-content > p:first-child {
    font-size: var(--text-3xl);
  }
}