@layer utilities {

  .hidden,
  [hidden] {
    display: none !important;
  }
  .busy-playing {
    background: red !important;
  }
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bold-shadow {
    text-shadow: 1px 0px 0px black;
  }


  .grid-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-auto-s {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }
  .grid-auto-m {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
  .grid-auto-l {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }
  .gap-xs { gap: var(--space-xs); }
  .gap-s  { gap: var(--space-s); }
  .gap-m  { gap: var(--space-m); }
  .gap-l  { gap: var(--space-l); }
  .gap-xl { gap: var(--space-xl); }
  
}
/* End Utilities Layer */