@layer components {
  .cta {
    background: linear-gradient(to bottom, oklch(0.5 0.2 265), oklch(0.35 0.19 265));
    padding-block: 14cqi;
    padding-inline: 6cqi;
    text-align: center;
  }

  .cta__heading {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.6;
    color: var(--color-accent-light);
    margin-block-end: 1cqi;
  }

  .cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    margin-block-end: 4cqi;
  }

  .cta__btn-web {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 5.5cqi;
    background-color: var(--color-accent-light);
    border: none;
    border-radius: 2.5cqi;
    box-shadow: inset 0 -4px 0 0 oklch(0.6 0.15 120);
    font-family: var(--font-hero);
    font-size: 5.5cqi;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
  }

  .cta__btn-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 4cqi;
    background-color: oklch(1 0 0);
    border: 2px solid oklch(1 0 0);
    border-radius: 2.5cqi;
    box-shadow: inset 0 -4px 0 0 oklch(0.8 0.01 260);
    text-decoration: none;
    cursor: pointer;
    gap: 0.5cqi;
  }

  .cta__btn-tel-label {
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent);
  }

  .cta__btn-tel-number {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.05em;
    color: var(--color-accent);
  }

  .cta__hours {
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(1 0 0);
  }
}