@layer page {
  main.index section.hero {
    text-align: center;

    header {
      padding: 0 1rem;
    }

    header h1 {
      margin: 2rem 0;
      font-size: 3rem;
      line-height: 1.05;
      font-weight: 900;
      color: var(--color-elk-blue-500);
    }

    header .subtitle {
      margin: 0 auto;
      max-width:768px;
      font-size: 1.25rem;
      line-height: 1.75;
    }

    .features {
      max-width: 1024px;
      margin: 3rem auto 0 auto;
      padding: 0 1rem;
    }

    .features ul {
      list-style:none;
      padding-left:0;
      margin: 0;
      display:grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      justify-content:center;
    }

    .features .icon {
      height: 4rem;
      width: auto;
      display:inline-block;
      border-radius: 0;
    }

    .features h2 {
      margin-top: .75rem;
      font-size: 1.125rem;
      font-weight: 800;
    }

    .features .description {
      font-size: 1rem;
      line-height: 1.625;
    }

    .cta {
      border-radius: 9999px;
      border-width: 2px;
      border-style: solid;
      border-color: var(--color-elk-blue-500);
      background-color: var(--color-elk-blue-500);
      padding: .5rem 1.5rem;
      text-align:center;
      color:#fff;
      display:inline-block;

      &:hover {
        border-color: var(--color-elk-blue-700);
        background-color: var(--color-elk-blue-700);
      }
    }
  }

  @media (width >= 1024px){
    main.index section.hero {
      .features ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
      }
    }
  }
}