.banner {
  grid-column: full-start / full-end;
  /* background: var(--color-primary); */
  /* color: var(--color-light); */

  @media (min-width: 768px) {
    margin-top: var(--sp-lg);
    padding-block: var(--sp-lg);
  }

  .container {
    display: grid;
    gap: var(--sp-md);

    .items {
      display: grid;
      gap: var(--sp-md);

      @media (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1000px;
        margin: 0 auto;
      }
      
      .item {
        background: var(--color-primary);
        color: var(--color-light);
        padding: var(--sp-md);
        border-radius: 8px;
        font-size: 1rem;
        text-align: center;

        div {
          font-family: var(--font-fun);
          font-size: var(--fs-xl);
        }

        a {
          color: var(--color-light);
        }
      }
    }
  }

  small {
    text-align: center;
    text-wrap-style: balance;
  }
}