/**
 * Mobile 320px Viewport Utilities
 * Extreme space conservation - Target: <3KB
 */

@media (max-width: 320px) {
  /* Compact Padding */
  .p-320-compact,.px-320-compact,.py-320-compact{padding:.25rem!important}
  .p-320-compact-sm{padding:.125rem!important}
  .px-320-compact{padding-left:.25rem!important;padding-right:.25rem!important}
  .py-320-compact{padding-top:.25rem!important;padding-bottom:.25rem!important}

  /* Full Width */
  .w-320-full{width:100%!important;max-width:100%!important}
  .w-320-auto{width:auto!important;max-width:none!important}

  /* Flex Stack */
  .flex-320-col{flex-direction:column!important}
  .flex-320-col-reverse{flex-direction:column-reverse!important}
  .flex-320-row{flex-direction:row!important}

  /* Text Sizes */
  .text-320-sm{font-size:.75rem!important;line-height:1.2!important}
  .text-320-xs{font-size:.625rem!important;line-height:1.1!important}
  .text-320-base{font-size:.875rem!important;line-height:1.3!important}

  /* Show/Hide */
  .hidden-320{display:none!important}
  .visible-320{display:block!important}
  .invisible-320{visibility:hidden!important}

  /* Compact Margins */
  .m-320-compact,.mx-320-compact,.my-320-compact{margin:.25rem!important}
  .mx-320-compact{margin-left:.25rem!important;margin-right:.25rem!important}
  .my-320-compact{margin-top:.25rem!important;margin-bottom:.25rem!important}
  .m-320-none{margin:0!important}

  /* Gap */
  .gap-320-compact{gap:.25rem!important}
  .gap-320-none{gap:0!important}

  /* Overflow & Text Truncation */
  .overflow-320-hidden{overflow:hidden!important}
  .overflow-320-auto{overflow:auto!important}
  .overflow-320-scroll{overflow:scroll!important}
  .text-320-truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .text-320-ellipsis-2{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

  /* Display */
  .block-320{display:block!important}
  .inline-block-320{display:inline-block!important}
  .flex-320{display:flex!important}
  .grid-320{display:grid!important}

  /* Alignment */
  .text-320-left{text-align:left!important}
  .text-320-center{text-align:center!important}
  .text-320-right{text-align:right!important}
  .items-320-start{align-items:flex-start!important}
  .items-320-center{align-items:center!important}
  .items-320-stretch{align-items:stretch!important}
  .justify-320-start{justify-content:flex-start!important}
  .justify-320-center{justify-content:center!important}
  .justify-320-between{justify-content:space-between!important}
}