.hero {
  inner-wrapper {
    padding-block-end: var(--sp-40);
  }

  .breadcrumbs {
    border-block-end: var(--border);
    margin-block-end: var(--sp-40);
  }

  iframe {
    display: block;
    margin-inline: auto;
  }
}

.resources {
  container: resources / inline-size;

  inner-wrapper {
    padding-block: var(--sp-40);
    border-block-start: var(--border);

    h2 {
      margin-block-end: var(--sp-40);
    }

    display: grid;
    grid-template-columns: var(--sp-330) 1fr;

    @container (inline-size < 53.125rem) {
      grid-template-columns: 1fr;
    }
  }
}