/* ===== Intro Section ===== */

.intro {
  background: linear-gradient(
    to bottom,
    var(--color-bg-surface) 0,
    var(--color-bg-surface) 74%,
    var(--color-background) 74%,
    var(--color-background) 100%
  );
}

.intro__content {
  max-width: 544px;
}

.intro__accent {
  margin: 0;
  font-size: 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.intro__title {
  margin: 0.8rem 0 0;
  line-height: 1.05;
  font-weight: 700;
}

.intro__description {
  margin: 2.4rem 0 0;
  font-size: 1.6rem;
  line-height: 1.85;
  color: var(--color-light-grey);
}

.intro__button {
  margin-top: 2.8rem;
  margin-bottom: 3.2rem;
}

.intro__media {
  display: block;
  overflow: hidden;
}

.intro__media--left {
  width: 100%;
  margin-top: 4rem;
}

.intro__media--right {
  width: min(100%, 384px);
  aspect-ratio: 520 / 745;
  max-height: 800px;
  margin-top: 3.2rem;
  margin-inline: auto;
}

.intro__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2rem;
  }

  .intro__content {
    max-width: none;
    min-height: 41rem;
    display: flex;
    flex-direction: column;
  }

  .intro__aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    min-height: 41rem;
  }

  .intro__media--left {
    width: 100%;
    margin-top: 4rem;
  }

  .intro__media--right {
    width: min(100%, 460px);
    height: auto;
    aspect-ratio: 520 / 745;
    max-height: 800px;
    margin-top: 0;
    margin-inline: 0;
  }
}

/* ===== End Intro Section ===== */