@layer page {
  main.index section.stories {
    display: flex;
    flex-direction: column;

    .content {
      background: var(--color-elk-blue-50);
      padding-top: 3rem;
      padding-bottom: 8rem;
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 3rem;
      padding-inline: 1rem;
    }

    .content > * {
      width: 100%;
      max-width: 768px;
    }

    h2 {
      text-align: center;
      text-transform: uppercase;
      font-size: 1.125rem;
    }

    .story {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      align-items:center;
    }

    .icon{
      border-radius: .375rem;
      max-width: 100%;
      height: auto;
    }

    h3 {
      font-size: 1.875rem;
      line-height: 2.25rem;
      font-weight: 900;
    }

    .cta {
      color: var(--color-elk-blue-500);
      &:hover{
        text-decoration: underline;
      }
    }
  }

  @media (width >= 1024px){
    main.index section.stories {
      .story {
        flex-direction:row;
        &:nth-of-type(even) {
          flex-direction: row-reverse;
        }
      }
    }
  }
}