@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .col-4 {
    grid-column: 4;
  }
  .col-6 {
    grid-column: 6;
  }
  .col-12 {
    grid-column: 12;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .w-full {
    width: 100%;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-\[10px\] {
    padding: 10px;
  }
  .text-center {
    text-align: center;
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:flex-1 {
    @media (width >= 48rem) {
      flex: 1;
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:p-0 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}