.hero {
  container: hero / inline-size;

  inner-wrapper {
    padding-block-end: 0;
  }

  picture {
    padding-block-end: var(--sp-40);
    border-block-end: var(--border);

    img {
      border-radius: var(--sp-12);
      aspect-ratio: 1380 / 776;
      object-fit: cover;
    }
  }
}

.content {
  container: university-content / inline-size;

  inner-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--sp-20);
    padding-block-start: var(--sp-40);

    >p {
      width: min(var(--sp-330), 100%);
      margin-block-end: var(--sp-20);
    }

    p+p {
      margin-block-start: var(--sp-20);
    }

    .external {
      margin-block-start: var(--sp-40);
    }

    university-content {
      display: block;
      max-width: var(--sp-680);

      >a+a {
        margin-block-start: var(--sp-20);
      }

      h2 {
        font-family: var(--f-rr);
        font-size: var(--fs-40-24);
        letter-spacing: calc(var(--neg-1) * var(--fs-40-24));
        line-height: var(--lh-120);
        text-transform: none;
        margin-block-end: var(--sp-40);

        &+p {
          margin-block-start: var(--sp-20);
        }
      }

      a {
        color: var(--black-tint-14);
      }
    }

    @container (inline-size < 56.25rem) {
      flex-direction: column;

      university-content {
        max-width: 100%;
        margin-inline: 0;
      }
    }
  }
}