@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .max-width-container {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .h-screen {
    height: 100vh;
  }

  .w-10ch { width: 10ch; }
  .w-15ch { width: 15ch; }
  .w-20ch { width: 20ch; }
  .w-30ch { width: 30ch; }
  .w-40ch { width: 40ch; }
  .w-60ch { width: 60ch; }
  .w-80ch { width: 80ch; }

  .min-w-10ch { min-width: 10ch; }
  .min-w-15ch { min-width: 15ch; }
  .min-w-20ch { min-width: 20ch; }
  .min-w-30ch { min-width: 30ch; }
  .min-w-40ch { min-width: 40ch; }
  .min-w-60ch { min-width: 60ch; }
  .min-w-80ch { min-width: 80ch; }

  .max-w-10ch { max-width: 10ch; }
  .max-w-15ch { max-width: 15ch; }
  .max-w-20ch { max-width: 20ch; }
  .max-w-30ch { max-width: 30ch; }
  .max-w-40ch { max-width: 40ch; }
  .max-w-60ch { max-width: 60ch; }
  .max-w-80ch { max-width: 80ch; }
}