@layer modules {
  .hero {
    --angle: 90deg;

    background: linear-gradient(var(--angle), oklch(0.2538 0.0413 281.03) 20%, oklch(0.3429 0.0484 272.49) 50%);
    border-block-start: 1em solid oklch(0.7518 0.1727 58.11);
    color: oklch(var(--lch-white));

    @media (max-width: 639px) {
      --angle: 180deg;
    }
    
    .container {
      display: grid;
      gap: clamp(1.5rem, 4vw, 3rem);
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      align-items: center;

      @media (max-width: 639px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .hero__button {
    --btn-background: oklch(0.7518 0.1727 58.11);
    --btn-border-color: oklch(0.2538 0.0413 281.03);
    --btn-color: oklch(0.2538 0.0413 281.03);

    margin-block-end: var(--space-double);
  }
  
  .hero__subtitle {
    font-size: var(--text-large);
    margin-block-start: 0;
  }

  .hero__title {
    color: oklch(0.7518 0.1727 58.11);
    font-size: var(--text-medium);
    font-weight: bold;
    letter-spacing: 0.15em;
    margin: var(--space-double) 0 0 0;
    text-transform: uppercase;
  }
  
  .hero__image {
    inline-size: 100%;
  }
  
  .hero__logo {
    fill: oklch(var(--lch-white));
    margin-inline: auto;
    max-inline-size: 45ch;
  }

  .footer {
    background: linear-gradient(-33deg, oklch(14.958% 0.00002 271.152), oklch(20.019% 0.00002 271.152));
    border-block-start: 0.5em solid oklch(23.185% 0.00153 16.319);
    color: oklch(var(--lch-white));
    font-size: var(--text-normal);
    padding: var(--space-double);

    a {
      text-decoration: none;
    }

    svg {
      block-size: 1.4em;
      fill: oklch(var(--lch-white));
      inline-size: 1.4em;
      vertical-align: middle;
    }
  }
}