@layer components {
  .btn {
    --gap: 0.4375rem;
    --inline-size: 9.875rem;
    --min-inline-size: 2.5rem;
    --min-block-size: 2.5rem;
    --padding-block: 0.625rem;
    --padding-inline: 1.375rem;
    --background-color: transparent;
    --background-color-on-hover: transparent;
    --background-color-on-focus: var(--background-color-on-hover);
    --border-inline-size: 0.0625rem;
    --border-style: solid;
    --border-color: transparent;
    --border-color-on-hover: transparent;
    --border-color-on-focus: var(--border-color-on-hover);
    --border-radius: 0.5rem;
    --outline-inline-size: 0;
    --outline-style: solid;
    --outline-offset: 0;
    --outline-color: color-mix(in oklab, var(--background-color-on-focus), transparent 75%);
    --color: var(--clr-info-600);
    --color-on-hover: var(--color);
    --color-on-focus: var(--color-on-hover);
    --font-size: 0.875rem;
    --font-weight: 600;
    --line-height: 1.5;
    --transition-duration: 0.3s;
    --transition-timing-function: ease;
    --text-decoration: none;
    --text-transform: none;
    --opacity: 1;

    --icon-font-size: inherit;
    --icon-line-height: inherit;

    --spinner-size: calc(var(--min-block-size) / 2.625);
    --spinner-border-color: var(--clr-neutral-700);
    --spinner-speed: 0.6s;

    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    inline-size: min(100%, var(--inline-size));
    min-inline-size: var(--min-inline-size);
    min-block-size: var(--min-block-size);
    padding: var(--padding-block) var(--padding-inline);
    background-color: var(--background-color);
    border: var(--border-inline-size)  var(--border-color) var(--border-style);
    border-radius: var(--border-radius);
    outline: var(--outline-inline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset);
    color: var(--color);
    font-size: var(--font-size);
    font-variation-settings: 'wght' var(--font-weight);
    line-height: var(--line-height);
    letter-spacing: 0.01rem;
    text-decoration: none;
    text-align: center;
    text-transform: var(--text-transform);
    white-space: nowrap;
    opacity: var(--opacity);

    &,
    & > * {
      transition: all var(--transition-duration) var(--transition-timing-function);
    }

    & > i {
      font-size: var(--icon-font-size);
      line-height: var(--icon-line-height);
      transition: none;
    }

    &:hover {
      background-color: var(--background-color-on-hover);
      border-color: var(--border-color-on-hover);
      color: var(--color-on-hover);
    }

    &:is(:focus, :focus-within) {
      background-color: var(--background-color-on-focus);
      border-color: var(--border-color-on-focus);
      color: var(--color-on-focus);
    }

    &:is(:focus, :focus-within, :hover) {
      --outline-inline-size: 0.25rem;

      text-decoration: none;
    }

    /* Appearance */

    /*&.-brand {*/
    /*  --background-color: var(--clr-brand-200);*/
    /*  --background-color-on-hover: var(--clr-brand-300);*/
    /*  --border-color: var(--clr-brand-200);*/
    /*  --border-color-on-hover: var(--clr-brand-300);*/
    /*  --color: var(--clr-accent-900);*/

    /*  --spinner-border-color: var(--clr-brand-700);*/
    /*}*/

    &.-secondary {
      --background-color: var(--clr-secondary-600);
      --background-color-on-hover: var(--clr-secondary-700);
      --border-color: var(--clr-secondary-600);
      --border-color-on-hover: var(--clr-secondary-700);
      --color: var(--clr-secondary-100);

      --spinner-border-color: var(--clr-secondary-100);
    }

    &.-secondary-50 {
      --background-color: var(--clr-secondary-50);
      --background-color-on-hover: var(--clr-neutral-0);
      --border-color: var(--clr-secondary-50);
      --border-color-on-hover: var(--clr-neutral-0);
      --color: var(--clr-primary-950);

      --spinner-border-color: var(--clr-primary-950);
    }

    &.-neutral {
      --background-color: var(--clr-neutral-50);
      --background-color-on-hover: var(--clr-neutral-200);
      --border-color: var(--clr-neutral-50);
      --border-color-on-hover: var(--clr-neutral-200);
      --color: var(--clr-primary-950);

      --spinner-border-color: var(--clr-primary-950);
    }

    /*&.-neutral-100 {*/
    /*  --background-color: var(--clr-neutral-100);*/
    /*  --background-color-on-hover: var(--clr-neutral-200);*/
    /*  --border-color: var(--clr-neutral-100);*/
    /*  --border-color-on-hover: var(--clr-neutral-200);*/
    /*  --color: var(--clr-brand-700);*/

    /*  --spinner-border-color: var(--clr-brand-800);*/
    /*}*/

    /*&.-neutral-300 {*/
    /*  --background-color: var(--clr-neutral-300);*/
    /*  --background-color-on-hover: var(--clr-neutral-400);*/
    /*  --border-color: var(--clr-neutral-300);*/
    /*  --border-color-on-hover: var(--clr-neutral-400);*/
    /*  --color: var(--clr-neutral-700);*/

    /*  --spinner-border-color: var(--clr-neutral-700);*/
    /*}*/

    &.-success {
      --background-color: var(--clr-success-200);
      --background-color-on-hover: var(--clr-success-700);
      --border-color: var(--clr-success-200);
      --border-color-on-hover: var(--clr-success-700);
      --color: var(--clr-success-700);
      --color-on-hover: var(--clr-success-50);

      --spinner-border-color: var(--clr-success-50);
    }

    &.-success-outline {
      --background-color: color-mix(in oklab, var(--clr-success-500), transparent 90%);
      --background-color-on-hover: color-mix(in oklab, var(--clr-success-500), transparent 85%);
      --border-color: color-mix(in oklab, var(--clr-success-500), transparent 60%);
      --border-color-on-hover: color-mix(in oklab, var(--clr-success-500), transparent 50%);
      --color: var(--clr-success-400);
      --color-on-hover: var(--clr-success-400);

      --spinner-border-color: var(--clr-success-500);
    }

    &.-danger {
      --background-color: var(--clr-danger-100);
      --background-color-on-hover: var(--clr-danger-200);
      --border-color: var(--clr-danger-100);
      --border-color-on-hover: var(--clr-danger-200);
      --color: var(--clr-danger-600);
      --color-on-hover: var(--clr-danger-700);
      --spinner-border-color: var(--clr-danger-800);
    }

    &.-warning {
      --background-color: var(--clr-warning-100);
      --background-color-on-hover: var(--clr-warning-200);
      --border-color: var(--clr-warning-100);
      --border-color-on-hover: var(--clr-warning-200);
      --color: var(--clr-warning-700);
      --color-on-hover: var(--clr-warning-900);

      --spinner-border-color: var(--clr-warning-900);
    }

    &.-warning-outline {
      --background-color: color-mix(in oklab, var(--clr-warning-500), transparent 90%);
      --background-color-on-hover: color-mix(in oklab, var(--clr-warning-500), transparent 85%);
      --border-color: color-mix(in oklab, var(--clr-warning-500), transparent 60%);
      --border-color-on-hover: color-mix(in oklab, var(--clr-warning-500), transparent 50%);
      --color: var(--clr-warning-500);
      --color-on-hover: var(--clr-warning-500);

      --spinner-border-color: var(--clr-warning-600);
    }

    &.-info {
      --background-color: var(--clr-info-100);
      --background-color-on-hover: var(--clr-info-200);
      --border-color: var(--clr-info-100);
      --border-color-on-hover: var(--clr-info-200);
      --color: var(--clr-info-500);
      --color-on-hover: var(--clr-info-600);

      --spinner-border-color: var(--clr-info-800);
    }

    &.-large {
      --gap: 1rem;
      --inline-size: 13.5rem;
      --min-inline-size: 13.5rem;
      --min-block-size: 3.25rem;
      --padding-block: 0.875rem;
      --padding-inline: 1rem;
      --border-radius: 0.625rem;
      --icon-font-size: 110%;
    }

    &.-small {
      --inline-size: 6.5rem;
      --min-inline-size: 6.5rem;
      --min-block-size: 2.5rem;
      --padding-block: 0.375rem;
      --padding-inline: 0.875rem;
      --border-radius: 0.4375rem;
      --font-size: 0.875rem;
      --line-height: 1.375;
      --icon-font-size: 120%;

      & > i {
        line-height: 0.78 !important;
      }
    }

    &.-extra-small {
      --inline-size: 5.5rem;
      --min-inline-size: 5.5rem;
      --min-block-size: 2.25rem;
      --padding-block: 0.25rem;
      --padding-inline: 0.875rem;
      --border-radius: 0.375rem;
      --font-size: 0.8125rem;
      --line-height: 1.5;
      --icon-font-size: 115%;

      & > i {
        line-height: 0.78 !important;
      }
    }

    &.-min-content {
      inline-size: min-content;
    }

    &.-fluid {
      inline-size: 100%;
    }

    &.-max-content {
      min-inline-size: max-content;
      inline-size: max-content;
    }

    &.-uniform {
      inline-size: auto;
      min-inline-size: auto;
      /*padding: 0;*/
      aspect-ratio: 1 / 1;
    }

    &.-outline {
      --color: var(--border-color);
      --background-color: transparent;
    }

    &.-large-icon > i {
      font-size: 1.5rem;
      line-height: 0.5 !important;

      ::before {
        line-height: 0.5 !important;
      }
    }

    /* Behavior */

    &:disabled,
    .-disabled {
      --opacity: 0.62;

      pointer-events: none;
    }

    &.-loading {
      color: transparent !important;
      pointer-events: none;

      & > * {
        opacity: 0;
      }

      &::after {
        content: "";
        position: absolute;
        top: calc(50% - (var(--spinner-size) / 2));
        left: calc(50% - (var(--spinner-size) / 2));
        z-index: 1;
        inline-size: var(--spinner-size);
        block-size: var(--spinner-size);
        border: 0.125rem solid transparent;
        border-left-color: var(--spinner-border-color);
        border-top-color: var(--spinner-border-color);
        border-radius: 50%;
        animation: spin var(--spinner-speed) infinite linear;
      }
    }
  }

  .container {
    --max-inline-size: 96rem;

    inline-size: min(100% - 2rem, var(--max-inline-size));
    margin-inline: auto;

    &.-narrow {
      --max-inline-size: 86rem;
    }

    &.-extra-narrow {
      --max-inline-size: 76rem;
    }
  }

  .hero {
    background-color: var(--clr-secondary-600);
    padding: clamp(3rem, 12vw, 5rem) 2rem;

    .hero-container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(3rem, 11vw, 6rem);
      justify-content: center;
      align-items: center;
      inline-size: min(100%, 86rem);
      margin: auto;

      & > * {
        margin: auto;
      }

      @media screen and (min-width: 62rem) {
        grid-template-columns: 1fr 1fr;
      }
    }

    .hero-pictures {
      place-self: flex-start;
      /*inline-size: calc(min(100%, 35rem) + 1.25rem);*/

      & > picture {
        position: relative;
        inline-size: calc(100% - clamp(4rem, 8vw, 8rem));
        block-size: auto;
        border: 0.625rem solid var(--clr-secondary-600);
        border-radius: 1rem;
        overflow: hidden;

        @media screen and (min-width: 62rem) {
          inline-size: max-content;
        }

        & > img {
          inline-size: 100%;
          max-inline-size: 100%;
          block-size: auto;
          border-radius: 0.875rem;
        }
      }

      & > :first-child {
        z-index: 0;
        margin-inline-start: clamp(12rem, 20vw, 16rem);

        & > img {
          @media screen and (min-width: 62rem) {
            inline-size: 22.25rem;
            block-size: auto;
          }
        }
      }

      & > :last-child {
        z-index: 1;
        margin-block-start: calc(-1 * clamp(6rem, 14vw, 10rem));

        & > img {
          @media screen and (min-width: 62rem) {
            inline-size: auto;
            block-size: 18.0625rem;
          }
        }
      }
    }

    .hero-content,
    .hero-header {
      display: flex;
      flex-flow: column nowrap;
      gap: 2rem;
      inline-size: min(100%, 35rem);
    }

    .hero-header {
      gap: 0.375rem;
    }

    .hero-header,
    .hero-claim,
    .hero-title,
    .hero-footer {
      color: var(--clr-neutral-50);
    }

    .hero-claim {
      color: var(--clr-primary-950);
      font-variation-settings: "wght" 600;
    }

    .hero-title {
      font-variation-settings: "wght" 800;
    }

    .hero-paragraph {
      color: color-mix(in oklch, var(--clr-secondary-50), transparent 25%);
    }
  }

  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, auto));
    column-gap: clamp(2rem, 5cqi, 4rem);
    row-gap: 1rem;
    place-items: start center;
    margin: auto;
    padding: 0;
    list-style: none;
  }

  .tile {
    display: grid;
    grid-template-rows: min-content 1fr;
    place-items: start center;
    gap: 1.25rem;
    padding: 1rem;
    border-radius: 0.625rem;
    color: var(--clr-text);
    text-align: center;

    --icon-size: 4.25rem;
    --icon-background-color: var(--clr-primary-300);
    --icon-color: var(--clr-primary-950);

    .tile-icon {
      display: grid;
      place-items: center;
      inline-size: var(--icon-size);
      aspect-ratio: 1 / 1;
      margin: auto;
      background-color: var(--icon-background-color);
      border-radius: 50%;
      color: var(--icon-color);

      & > i {
        font-size: 150%;
        line-height: 0;
      }
    }

    .tile-content {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.625rem;
    }

    .tile-title {
      max-inline-size: 75%;
      min-block-size: 3rem;
      margin: auto;
      color: color-mix(in oklch, var(--clr-primary-950), transparent 10%);
      font-variation-settings: "wght" 650;
    }

    .tile-paragraph {
      font-size: 0.9375rem;
    }

    .tile-link {
      margin: auto;
    }
  }

  .cta {
    background-color: var(--clr-secondary-600);
    padding: clamp(3rem, 12vw, 5rem) 1rem;

    & .cta-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(3rem, 12vw, 5rem);

      @media screen and (min-width: 62rem) {
        grid-template-columns: 0.75fr 1fr;
      }
    }

    & .cta-content {
      display: flex;
      flex-flow: column nowrap;
      gap: 1.5rem;
      inline-size: min(100%, 75ch);

      & > h2 {
        color: var(--clr-secondary-50);
        font-variation-settings: "wght" 800;
      }

      & p {
        /*color: var(--clr-neutral-200);*/
        color: var(--clr-primary-950);
        font-size: 0.9375rem;
        font-variation-settings: "wght" 500;

        & ~ p {
          margin-block-start: 0.75rem;
        }
      }

      & > a {
        margin-block: 1.5rem 1rem;
      }
    }
  }

  .link {
    --color: var(--clr-info-500);
    --color-on-hover: var(--clr-info-600);
    --font-size: 1rem;
    --font-weight: 700;

    display: inline-flex;
    flex-flow: row nowrap;
    gap: 0.875ex;
    align-items: center;
    color: var(--color);
    font-size: var(--font-size);
    font-variation-settings: "wght" var(--font-weight);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.1s ease-in-out;

    &.-normal {
      --font-weight: 475;
    }

    &.-small {
      --font-size: 0.875rem;
      --font-weight: 525;
    }

    &.-extra-small {
      --font-size: 0.8125rem;
      --font-weight: 450;
    }

    &.-auto-underline:is(:focus, :focus-within, :hover) {
      text-decoration: underline;
    }

    &.-underlined {
      text-decoration: underline;
    }

    &.-success {
      --color: var(--clr-success-700);
      --color-on-hover: var(--clr-success-800);
    }

    &.-warning {
      --color: var(--clr-warning-600);
      --color-on-hover: var(--clr-warning-700);
    }

    &.-danger {
      --color: var(--clr-danger-500);
      --color-on-hover: var(--clr-danger-600);

      & > * {
        color: inherit;
      }
    }

    &:is(:focus, :focus-within, :hover) {
      --color: var(--color-on-hover);
    }
  }
}