.hero-wrapper {
  padding: var(--ses-spacing-xl) var(--ses-spacing-md);
  background-color: var(--ses-color-brand-eggplant);
  color: var(--ses-color-brand-rice);
  display: grid;
  place-items: center;
  color: var(--ses-color-brand-rice);
  background-image: var(--section-background-image);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: auto 125%;
}

.hero.content-wrapper {
  display: grid;
  gap: var(--ses-spacing-lg);
}

.hero.content-wrapper .hero-image {
  inline-size: 100%;
  block-size: auto;
  min-block-size: min(500px, 25dvb);
  border-radius: var(--ses-border-radius-rounded);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.signature-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.signature-wrapper .signature-name {
  font-family: var(--ses-font-family-heading-italic);
  font-size: var(--ses-font-size-lg);
  line-height: var(--ses-line-height-reset);
  font-style: italic;
}

.signature-wrapper .signature-credentials {
  font-size: var(--ses-font-size-sm);
  font-style: italic;
  color: var(--ses-color-brand-white);
}

.cta-wrapper {
  display: grid;
  place-items: center;
}

.test-cta-wrapper {
  font-size: var(--ses-font-size-lg);
}

.test-cta-wrapper p {
  font-size: var(--ses-font-size-lg);
}

.test-cta.content-wrapper {
  align-items: center;
  display: flex;
  gap: var(--ses-spacing-md);
  justify-self: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.test-cta.content-wrapper h2 {
  font-size: var(--ses-font-size-3xl);
}

/* MEDIA QUERIES */
@media screen and (min-width: 900px) {
  .hero.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--ses-spacing-xl);
  }

  .hero.content-wrapper .hero-image {
    inline-size: 100%;
    align-self: start;
    border-radius: var(--ses-border-radius-rounded);
    object-fit: unset;
    aspect-ratio: unset;
    min-block-size: unset;
  }
}

@media screen and (min-width: 1125px) {
  .test-cta.content-wrapper {
    justify-content: space-between;
    text-align: start;
  }
}
