@layer theme, base, components, utilities;
@layer utilities {
@media (hover: hover) {
    a.card:hover {
      filter: brightness(95%);
    }

    a.card:hover:where([data-mode="dark"], [data-mode="dark"] *) {
      filter: brightness(110%);
    }
  }
@media (width >= 48rem) {
    .h2 {
      font-size: var(--text-4xl);
      line-height: var(--text-4xl--line-height);
    }
  }
@media (width >= 48rem) {
    .h3 {
      font-size: var(--text-3xl);
      line-height: var(--text-3xl--line-height);
    }
  }
@media (hover: hover) {
    .hover\:bg-primary-300:hover {
      background-color: var(--color-primary-300);
    }
  }
@media (hover: hover) {
    .hover\:bg-surface-800:hover {
      background-color: var(--color-surface-800);
    }
  }
@media (hover: hover) {
    .hover\:bg-surface-950:hover {
      background-color: var(--color-surface-950);
    }
  }
@media (hover: hover) {
    .hover\:text-primary-50:hover {
      color: var(--color-primary-50);
    }
  }
@media (hover: hover) {
    .hover\:text-primary-300:hover {
      color: var(--color-primary-300);
    }
  }
@media (hover: hover) {
    .hover\:text-primary-700:hover {
      color: var(--color-primary-700);
    }
  }
@media (hover: hover) {
    .hover\:text-secondary-300:hover {
      color: var(--color-secondary-300);
    }
  }
@media (width < 360px) {
    .max-\[360px\]\:size-11 {
      width: calc(var(--spacing) * 11);
      height: calc(var(--spacing) * 11);
    }
  }
@media (width < 360px) {
    .max-\[360px\]\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }
  }
@media (width >= 40rem) {
    .sm\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
@media (width >= 40rem) {
    .sm\:h-28 {
      height: calc(var(--spacing) * 28);
    }
  }
@media (width >= 40rem) {
    .sm\:min-h-\[60px\] {
      min-height: 60px;
    }
  }
@media (width >= 40rem) {
    .sm\:w-28 {
      width: calc(var(--spacing) * 28);
    }
  }
@media (width >= 40rem) {
    .sm\:w-28\! {
      width: calc(var(--spacing) * 28) !important;
    }
  }
@media (width >= 40rem) {
    .sm\:w-auto {
      width: auto;
    }
  }
@media (width >= 40rem) {
    .sm\:w-fit {
      width: fit-content;
    }
  }
@media (width >= 40rem) {
    .sm\:basis-\[200px\] {
      flex-basis: 200px;
    }
  }
@media (width >= 40rem) {
    .sm\:basis-\[220px\] {
      flex-basis: 220px;
    }
  }
@media (width >= 40rem) {
    .sm\:basis-\[300px\] {
      flex-basis: 300px;
    }
  }
@media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
@media (width >= 40rem) {
    .sm\:grid-cols-\[repeat\(auto-fill\,minmax\(220px\,1fr\)\)\] {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
  }
@media (width >= 40rem) {
    .sm\:flex-row {
      flex-direction: row;
    }
  }
@media (width >= 40rem) {
    .sm\:flex-wrap {
      flex-wrap: wrap;
    }
  }
@media (width >= 40rem) {
    .sm\:items-start {
      align-items: flex-start;
    }
  }
@media (width >= 40rem) {
    .sm\:px-\[44px\] {
      padding-inline: 44px;
    }
  }
@media (width >= 40rem) {
    .sm\:text-left {
      text-align: left;
    }
  }
@media (width >= 40rem) {
    .sm\:text-left\! {
      text-align: left !important;
    }
  }
@media (width >= 48rem) {
    .md\:mb-\[0\.6em\] {
      margin-bottom: .6em;
    }
  }
@media (width >= 48rem) {
    .md\:flex {
      display: flex;
    }
  }
@media (width >= 48rem) {
    .md\:size-12 {
      width: calc(var(--spacing) * 12);
      height: calc(var(--spacing) * 12);
    }
  }
@media (width >= 48rem) {
    .md\:size-\[72px\] {
      width: 72px;
      height: 72px;
    }
  }
@media (width >= 48rem) {
    .md\:min-h-16 {
      min-height: calc(var(--spacing) * 16);
    }
  }
@media (width >= 48rem) {
    .md\:max-w-\[14ch\] {
      max-width: 14ch;
    }
  }
@media (width >= 48rem) {
    .md\:max-w-\[15ch\] {
      max-width: 15ch;
    }
  }
@media (width >= 48rem) {
    .md\:grow {
      flex-grow: 1;
    }
  }
@media (width >= 48rem) {
    .md\:basis-0 {
      flex-basis: calc(var(--spacing) * 0);
    }
  }
@media (width >= 48rem) {
    .md\:rotate-2 {
      rotate: 2deg;
    }
  }
@media (width >= 48rem) {
    .md\:columns-2 {
      columns: 2;
    }
  }
@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\:flex-nowrap {
      flex-wrap: nowrap;
    }
  }
@media (width >= 48rem) {
    .md\:flex-wrap {
      flex-wrap: wrap;
    }
  }
@media (width >= 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }
@media (width >= 48rem) {
    .md\:items-end {
      align-items: flex-end;
    }
  }
@media (width >= 48rem) {
    .md\:justify-between {
      justify-content: space-between;
    }
  }
@media (width >= 48rem) {
    .md\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
  }
@media (width >= 48rem) {
    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }
@media (width >= 48rem) {
    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }
@media (width >= 48rem) {
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
  }
@media (width >= 48rem) {
    .md\:gap-\[22px\] {
      gap: 22px;
    }
  }
@media (width >= 48rem) {
    .md\:gap-x-10 {
      column-gap: calc(var(--spacing) * 10);
    }
  }
@media (width >= 48rem) {
    .md\:gap-x-\[26px\] {
      column-gap: 26px;
    }
  }
@media (width >= 48rem) {
    .md\:gap-y-2 {
      row-gap: calc(var(--spacing) * 2);
    }
  }
@media (width >= 48rem) {
    .md\:gap-y-3\.5 {
      row-gap: calc(var(--spacing) * 3.5);
    }
  }
@media (width >= 48rem) {
    .md\:self-center {
      align-self: center;
    }
  }
@media (width >= 48rem) {
    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
@media (width >= 48rem) {
    .md\:p-\[14px\] {
      padding: 14px;
    }
  }
@media (width >= 48rem) {
    .md\:px-1 {
      padding-inline: calc(var(--spacing) * 1);
    }
  }
@media (width >= 48rem) {
    .md\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
@media (width >= 48rem) {
    .md\:px-9 {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
@media (width >= 48rem) {
    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
@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\:pt-3\.5 {
      padding-top: calc(var(--spacing) * 3.5);
    }
  }
@media (width >= 48rem) {
    .md\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }
  }
@media (width >= 48rem) {
    .md\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }
  }
@media (width >= 48rem) {
    .md\:pb-0 {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
@media (width >= 48rem) {
    .md\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
@media (width >= 48rem) {
    .md\:pb-\[88px\] {
      padding-bottom: 88px;
    }
  }
@media (width >= 48rem) {
    .md\:text-2xl {
      font-size: calc(1.5rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(calc(2 / 1.5) * var(--text-scaling)));
    }
  }
@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-7xl {
      font-size: calc(4.5rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(1 * var(--text-scaling)));
    }
  }
@media (width >= 48rem) {
    .md\:text-sm {
      font-size: calc(.875rem * var(--text-scaling));
      line-height: var(--tw-leading, calc(calc(1.25 / .875) * 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-\[26px\] {
      font-size: 26px;
    }
  }
@media (width >= 48rem) {
    .md\:text-\[30px\] {
      font-size: 30px;
    }
  }
@media (width >= 48rem) {
    .md\:text-\[clamp\(32px\,3\.2vw\,48px\)\]\! {
      font-size: clamp(32px, 3.2vw, 48px) !important;
    }
  }
@media (width >= 48rem) {
    .md\:text-\[clamp\(42px\,4\.6vw\,68px\)\]\! {
      font-size: clamp(42px, 4.6vw, 68px) !important;
    }
  }
@media (width >= 48rem) {
    .md\:text-\[clamp\(110px\,13vw\,200px\)\]\! {
      font-size: clamp(110px, 13vw, 200px) !important;
    }
  }
@media (width >= 48rem) {
    .md\:text-\[clamp\(120px\,18vw\,270px\)\] {
      font-size: clamp(120px, 18vw, 270px);
    }
  }
@media (width >= 48rem) {
    .md\:leading-\[0\.82\] {
      --tw-leading: .82;
      line-height: .82;
    }
  }
@media (width >= 48rem) {
    .md\:leading-\[1\.1\]\! {
      --tw-leading: 1.1 !important;
      line-height: 1.1 !important;
    }
  }
@media (width >= 48rem) {
    .md\:leading-\[1\.04\]\! {
      --tw-leading: 1.04 !important;
      line-height: 1.04 !important;
    }
  }
@media (width >= 48rem) {
    .md\:leading-\[1\.5\] {
      --tw-leading: 1.5;
      line-height: 1.5;
    }
  }
@media (width >= 48rem) {
    .md\:tracking-\[0\.22em\] {
      --tw-tracking: .22em;
      letter-spacing: .22em;
    }
  }
@media (width >= 64rem) {
    .lg\:sticky {
      position: sticky;
    }
  }
@media (width >= 64rem) {
    .lg\:top-28 {
      top: calc(var(--spacing) * 28);
    }
  }
@media (width >= 64rem) {
    .lg\:col-start-1 {
      grid-column-start: 1;
    }
  }
@media (width >= 64rem) {
    .lg\:col-start-2 {
      grid-column-start: 2;
    }
  }
@media (width >= 64rem) {
    .lg\:row-span-2 {
      grid-row: span 2 / span 2;
    }
  }
@media (width >= 64rem) {
    .lg\:row-start-1 {
      grid-row-start: 1;
    }
  }
@media (width >= 64rem) {
    .lg\:aspect-square {
      aspect-ratio: 1;
    }
  }
@media (width >= 64rem) {
    .lg\:min-h-\[54px\] {
      min-height: 54px;
    }
  }
@media (width >= 64rem) {
    .lg\:columns-3 {
      columns: 3;
    }
  }
@media (width >= 64rem) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
@media (width >= 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
@media (width >= 64rem) {
    .lg\:grid-cols-\[minmax\(0\,1fr\)_380px\] {
      grid-template-columns: minmax(0, 1fr) 380px;
    }
  }
@media (width >= 64rem) {
    .lg\:grid-cols-\[minmax\(0\,280px\)_minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0, 280px) minmax(0, 1fr) auto;
    }
  }
@media (width >= 64rem) {
    .lg\:self-start {
      align-self: flex-start;
    }
  }
@media (width >= 64rem) {
    .lg\:text-\[34px\] {
      font-size: 34px;
    }
  }
@media (width >= 80rem) {
    .xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
@media (width >= 80rem) {
    .xl\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }
  }
@container (width >= 48rem) {
    .\@3xl\:max-w-\[500px\] {
      max-width: 500px;
    }
  }
@container (width >= 48rem) {
    .\@3xl\:justify-self-end {
      justify-self: flex-end;
    }
  }
@media (width < 360px) {
    .max-\[360px\]\:\[\&_\[data-part\=thumbnails\]\]\:gap-0 [data-part="thumbnails"] {
      gap: calc(var(--spacing) * 0);
    }
  }
@media (width < 360px) {
    .max-\[360px\]\:\[\&_\[data-part\=thumbnails\]_img\]\:size-11 [data-part="thumbnails"] img {
      width: calc(var(--spacing) * 11);
      height: calc(var(--spacing) * 11);
    }
  }
@media (width < 360px) {
    .max-\[360px\]\:\[\&_a\.preset-filled\]\:px-1\.5\! a.preset-filled {
      padding-inline: calc(var(--spacing) * 1.5) !important;
    }
  }
@media (width >= 64rem) {
    .lg\:\[\&_a\.preset-filled\]\:min-h-\[54px\]\! a.preset-filled {
      min-height: 54px !important;
    }
  }
@media (width < 360px) {
    .max-\[360px\]\:\[\&_a\.preset-outlined\]\:px-1\.5\! a.preset-outlined {
      padding-inline: calc(var(--spacing) * 1.5) !important;
    }
  }
@media (width >= 64rem) {
    .lg\:\[\&_a\.preset-outlined\]\:min-h-\[54px\]\! a.preset-outlined {
      min-height: 54px !important;
    }
  }
@media (width >= 48rem) {
    .md\:\[\&\>button\>span\]\:text-\[13px\] > button > span {
      font-size: 13px;
    }
  }
}