[data-component-id="kackaamin:story_highlights"] {
  text-align: center;
  container-type: inline-size;
  container-name: story-highlights;

  & ul {
    display: grid;
    gap: 32px;

    @container story-highlights (min-width: 512px) {
      grid-template-columns: repeat(2, 1fr);
    }

    & li {
      background: var(--bg-primary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px;
      aspect-ratio: 1 / 1;
      --border-radius: 25%;

      &:nth-child(4n + 1), &:nth-child(4n + 3) {
        border-radius: 0 var(--border-radius) 0 var(--border-radius);
      }

      &:nth-child(4n), &:nth-child(4n + 2) {
        border-radius: var(--border-radius) 0 var(--border-radius) 0;
      }

      @container story-highlights (min-width: 512px) {
        &:nth-child(4n), &:nth-child(4n + 1) {
          border-radius: 0 var(--border-radius) 0 var(--border-radius);
        }

        &:nth-child(4n + 2), &:nth-child(4n + 3) {
          border-radius: var(--border-radius) 0 var(--border-radius) 0;
        }
      }

      & h6 {
        color: var(--link-primary);
        display: inline-flex;
        align-items: center;
        gap: 8px;

        & span {
          font-family: var(--font-laila) serif;
          font-size: 64px;
          line-height: 130%;

          @container story-highlights (min-width: 512px) {
            font-size: 80px;
          }
        }
      }

      & p {
        font-size: 18px;
        line-height: 150%;
        color: var(--text-secondary);
        font-weight: 500;

        @container story-highlights (min-width: 512px) {
          font-size: 20px;
        }
      }
    }
  }
}