.hero {
  container: hero / inline-size;

  h1 {
    text-align: center;
  }

  at-inner>ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sp-320), 100%), 1fr));
    gap: var(--sp-20);
    margin-block-start: var(--sp-120-40);

    li {
      a {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
          "image"
          "title"
          "coverage";
        text-decoration: none;

        &:hover {
          h3 {
            text-decoration: underline;
          }

          img {
            transform: scale(1.01);
          }
        }
      }
      
      h3 {
        grid-area: title;
        color: var(--font);
        margin-block-start: var(--sp-20-12);
      }

      picture {
        grid-area: image;
        overflow: clip;

        img {
          object-fit: cover;
          transition: transform var(--animation-time) var(--animation-timing-function);
        }
      }

      ul {
        grid-area: coverage;
        margin-block-start: var(--sp-12);
        display: flex;
        flex-direction: row;
        gap: var(--sp-12);
      }
    }
  }
}