$app-primary: #5a4af4;
$app-primary-hover: #6048ff;
$app-text-grey: #5f687d;
section {
  .container {
    padding: 2rem 1rem;
    margin: 0 auto;
    max-width: 1280px;
    @media (min-width: 1024px) {
      padding: 4rem 1.5rem;
    }
    .content {
      text-align: center;
      margin: 0 auto;
      max-width: 640px;
      h1 {
        margin-bottom: 1rem;
        font-size: 4.5rem;
        letter-spacing: -0.015em;
        font-weight: 800;
        color: #2563eb;
        @media (min-width: 1024px) {
          font-size: 6rem;
        }
        &.dark {
          color: $app-primary;
        }
      }
      p {
        margin-bottom: 1rem;
        &.text-3xl {
          font-size: 1.875rem;
          letter-spacing: -0.015em;
          font-weight: 700;
          color: $app-text-grey;
          @media (min-width: 768px) {
            font-size: 2.25rem;
          }
          &.dark {
            color: $app-text-grey;
          }
        }
        &.text-lg {
          font-size: 1.125rem;
          font-weight: 300;
          color: #6b7280;
          &.dark {
            color: $app-text-grey;
          }
        }
      }
      a {
        display: inline-flex;
        color: white;
        background-color: $app-primary;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.375rem;
        text-align: center;
        margin: 1rem 0;
        &:hover {
          background-color: $app-primary-hover;
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
          &.dark {
            box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.5);
          }
        }
      }
    }
  }
}
