@layer theme, base, components, utilities;
@layer utilities {
@media (hover: hover) {
    .btn:not(:disabled):hover {
      filter: brightness(125%);
    }

    .btn:not(:disabled):hover:where([data-mode="dark"], [data-mode="dark"] *) {
      filter: brightness(75%);
    }
  }
@media (hover: hover) {
    .anchor:hover {
      -webkit-text-decoration: var(--anchor-text-decoration-hover);
      text-decoration: var(--anchor-text-decoration-hover);
    }
  }
@media (width >= 48rem) {
    .h1 {
      font-size: var(--text-5xl);
      line-height: var(--text-5xl--line-height);
    }
  }
@media (width >= 48rem) {
    .h2 {
      font-size: var(--text-4xl);
      line-height: var(--text-4xl--line-height);
    }
  }
@media (hover: hover) {
    .hover\:border-primary-500:hover {
      border-color: var(--color-primary-500);
    }
  }
@media (hover: hover) {
    .hover\:bg-primary-50:hover {
      background-color: var(--color-primary-50);
    }
  }
@media (hover: hover) {
    .hover\:bg-secondary-700:hover {
      background-color: var(--color-secondary-700);
    }
  }
@media (hover: hover) {
    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }
@media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
@media (width >= 40rem) {
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }
@media (width >= 48rem) {
    .md\:sticky {
      position: sticky;
    }
  }
@media (width >= 48rem) {
    .md\:top-6 {
      top: calc(var(--spacing) * 6);
    }
  }
@media (width >= 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }
@media (width >= 48rem) {
    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  }
@media (width >= 48rem) {
    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }
  }
@media (width >= 48rem) {
    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }
  }
@media (width >= 48rem) {
    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }
  }
@media (width >= 48rem) {
    .md\:col-span-8 {
      grid-column: span 8 / span 8;
    }
  }
@media (width >= 48rem) {
    .md\:col-span-9 {
      grid-column: span 9 / span 9;
    }
  }
@media (width >= 48rem) {
    .md\:row-span-2 {
      grid-row: span 2 / span 2;
    }
  }
@media (width >= 48rem) {
    .md\:aspect-auto {
      aspect-ratio: auto;
    }
  }
@media (width >= 48rem) {
    .md\:h-\[120px\] {
      height: 120px;
    }
  }
@media (width >= 48rem) {
    .md\:w-\[120px\] {
      width: 120px;
    }
  }
@media (width >= 48rem) {
    .md\:auto-rows-\[260px\] {
      grid-auto-rows: 260px;
    }
  }
@media (width >= 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
@media (width >= 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
@media (width >= 48rem) {
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
@media (width >= 48rem) {
    .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
@media (width >= 48rem) {
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
  }
@media (width >= 48rem) {
    .md\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
  }
@media (width >= 48rem) {
    .md\:gap-14 {
      gap: calc(var(--spacing) * 14);
    }
  }
@media (width >= 48rem) {
    .md\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }
  }
@media (width >= 48rem) {
    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }
@media (width >= 48rem) {
    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
@media (width >= 48rem) {
    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
@media (width >= 48rem) {
    .md\:px-11 {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
@media (width >= 48rem) {
    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
@media (width >= 48rem) {
    .md\:pt-7 {
      padding-top: calc(var(--spacing) * 7);
    }
  }
@media (width >= 48rem) {
    .md\:pt-32 {
      padding-top: calc(var(--spacing) * 32);
    }
  }
@media (width >= 48rem) {
    .md\:pb-11 {
      padding-bottom: calc(var(--spacing) * 11);
    }
  }
@media (width >= 48rem) {
    .md\:text-4xl {
      font-size: calc(2.25rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(calc(2.5 / 2.25) * var(--text-scaling)));
    }
  }
@media (width >= 48rem) {
    .md\:text-5xl {
      font-size: calc(3rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(1 * var(--text-scaling)));
    }
  }
@media (width >= 48rem) {
    .md\:text-xl {
      font-size: calc(1.25rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(calc(1.75 / 1.25) * var(--text-scaling)));
    }
  }
@media (width >= 48rem) {
    .md\:text-\[50px\] {
      font-size: 50px;
    }
  }
@media (width >= 64rem) {
    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
@media (hover: hover) {
    .\[\&_a\]\:hover\:text-secondary-300 a:hover {
      color: var(--color-secondary-300);
    }
  }
}