@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) {
    .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\: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-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
@media (width >= 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }
@media (width >= 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }
@media (width >= 48rem) {
    .md\:justify-between {
      justify-content: space-between;
    }
  }
@media (width >= 48rem) {
    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
@media (width >= 48rem) {
    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }
  }
@media (width >= 48rem) {
    .md\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }
  }
@media (width >= 48rem) {
    .md\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }
  }
@media (width >= 48rem) {
    .md\:text-3xl {
      font-size: calc(1.875rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(calc(2.25 / 1.875) * var(--text-scaling)));
    }
  }
@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-6xl {
      font-size: calc(3.75rem * 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)));
    }
  }
}