@layer utilities {
  /* Container */
  .max-width-sm { max-width: var(--width-sm); }
  .max-width-md { max-width: var(--width-md); }
  .max-width-lg { max-width: var(--width-lg); }
  .max-width-xl { max-width: var(--width-xl); }
  .width-25     { width: 25%; }
  .width-40     { width: 40%; }
  .width-50     { width: 50%; }
  .width-60     { width: 60%; }
  .width-75     { width: 75%; }
  .width-100    { width: 100%; }
  .width-thirds { width: calc(100% / 3); }

  /* Display */
  .block           { display: block; }
  .inline-block    { display: inline-block; }
  .hidden          { display: none; }
  .overflow-hidden { overflow: hidden; }
  .rounded         { border-radius: 0.5rem; }

  /* Flexbox */
  .flex            { display: flex; }
  .flex-none       { flex: none; }
  .flex-column     { flex-direction: column; }
  .flex-wrap       { flex-wrap: wrap; }
  .items-start     { align-items: flex-start; }
  .items-end       { align-items: flex-end; }
  .items-center    { align-items: center; }
  .items-baseline  { align-items: baseline; }
  .justify-start   { justify-content: flex-start; }
  .justify-end     { justify-content: flex-end; }
  .justify-center  { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .justify-around  { justify-content: space-around; }
  .justify-evenly  { justify-content: space-evenly; }
  .content-start   { align-content: flex-start; }
  .content-end     { align-content: flex-end; }
  .content-center  { align-content: center; }
  .content-between { align-content: space-between; }
  .content-around  { align-content: space-around; }
  .content-stretch { align-content: stretch; }

  /* Typography */
  .h1 { font-size: var(--h1); }
  .h2 { font-size: var(--h2); }
  .h3 { font-size: var(--h3); }
  .h4 { font-size: var(--h4); }
  .h5 { font-size: var(--h5); }
  .h6 { font-size: var(--h6); }
  .h7 { font-size: var(--h7); }

  .regular     { font-weight: 400; }
  .medium      { font-weight: 500; }
  .bold        { font-weight: 700; }
  .normal      { font-style: normal; }
  .italic      { font-style: italic; }
  .underline   { text-decoration: underline; }
  .text-center { text-align: center; }
  .text-left   { text-align: left; }
  .text-right  { text-align: right; }
  .lh-copy     { line-height: 1.5; }
  .lh-title    { line-height: 1; }
  .list-reset  { list-style: none; padding-left: 0; }
  .measure     { max-width: 32em; }
  .measure-sm  { max-width: 24em; }
  .nowrap      { white-space: nowrap; }
  .tracked     { letter-spacing: 0.25em; }
  .uppercase   { text-transform: uppercase; }
  .pretty      { text-wrap: pretty; }

  /* Color */
  .black     { color: var(--black); }
  .blue      { color: var(--blue); }
  .gray      { color: var(--gray); }
  .navy      { color: var(--navy); }
  .orange    { color: var(--orange); }
  .red       { color: var(--red); }
  .smoke     { color: var(--smoke); }
  .tan       { color: var(--tan); }
  .white     { color: var(--white); }
  .yellow    { color: var(--yellow); }
  .bg-black  { background-color: var(--black); }
  .bg-blue   { background-color: var(--blue); }
  .bg-gray   { background-color: var(--gray); }
  .bg-navy   { background-color: var(--navy); }
  .bg-orange { background-color: var(--orange); }
  .bg-red    { background-color: var(--red); }
  .bg-smoke  { background-color: var(--smoke); }
  .bg-tan    { background-color: var(--tan); }
  .bg-white  { background-color: var(--white); }
  .bg-yellow { background-color: var(--yellow); }
  .bb-smoke  { border-bottom: 0.175rem solid var(--smoke); }
  .bb-tan    { border-bottom: 0.175rem solid var(--tan); }
  .bb-white  { border-bottom: 0.175rem solid var(--white); }

  /* Position */
  .absolute  { position: absolute; }
  .fixed     { position: fixed; }
  .relative  { position: relative; }
  .z-index-1 { z-index: 1; }
  .z-index-2 { z-index: 2; }
  .z-index-3 { z-index: 3; }
  .z-index-4 { z-index: 4; }

  @media (min-width: 540px) {
    /* Small Container */
    .sm-max-width-sm { max-width: var(--width-sm); }
    .sm-max-width-md { max-width: var(--width-md); }
    .sm-max-width-lg { max-width: var(--width-lg); }
    .sm-max-width-xl { max-width: var(--width-xl); }
    .sm-width-25     { width: 25%; }
    .sm-width-40     { width: 40%; }
    .sm-width-50     { width: 50%; }
    .sm-width-60     { width: 60%; }
    .sm-width-75     { width: 75%; }
    .sm-width-100    { width: 100%; }
    .sm-width-thirds { width: calc(100% / 3); }

    /* Small Display */
    .sm-block        { display: block; }
    .sm-inline-block { display: inline-block; }
    .sm-hidden       { display: none; }

    /* Small Flexbox */
    .sm-flex            { display: flex; }
    .sm-flex-none       { flex: none; }
    .sm-flex-column     { flex-direction: column; }
    .sm-flex-wrap       { flex-wrap: wrap; }
    .sm-items-start     { align-items: flex-start; }
    .sm-items-end       { align-items: flex-end; }
    .sm-items-center    { align-items: center; }
    .sm-items-baseline  { align-items: baseline; }
    .sm-justify-start   { justify-content: flex-start; }
    .sm-justify-end     { justify-content: flex-end; }
    .sm-justify-center  { justify-content: center; }
    .sm-justify-between { justify-content: space-between; }
    .sm-justify-around  { justify-content: space-around; }
    .sm-justify-evenly  { justify-content: space-evenly; }
    .sm-content-start   { align-content: flex-start; }
    .sm-content-end     { align-content: flex-end; }
    .sm-content-center  { align-content: center; }
    .sm-content-between { align-content: space-between; }
    .sm-content-around  { align-content: space-around; }
    .sm-content-stretch { align-content: stretch; }

    /* Small Typography */
    .sm-h1 { font-size: var(--h1); }
    .sm-h2 { font-size: var(--h2); }
    .sm-h3 { font-size: var(--h3); }
    .sm-h4 { font-size: var(--h4); }
    .sm-h5 { font-size: var(--h5); }
    .sm-h6 { font-size: var(--h6); }
    .sm-h7 { font-size: var(--h7); }

    .sm-regular     { font-weight: 400; }
    .sm-medium      { font-weight: 500; }
    .sm-bold        { font-weight: 700; }
    .sm-normal      { font-style: normal; }
    .sm-italic      { font-style: italic; }
    .sm-underline   { text-decoration: underline; }
    .sm-text-center { text-align: center; }
    .sm-text-left   { text-align: left; }
    .sm-text-right  { text-align: right; }
    .sm-lh-copy     { line-height: 1.5; }
    .sm-lh-title    { line-height: 1; }
    .sm-list-reset  { list-style: none; padding-left: 0; }
    .sm-measure     { max-width: 32em; }
    .sm-measure-sm  { max-width: 24em; }
    .sm-nowrap      { white-space: nowrap; }
    .sm-tracked     { letter-spacing: 0.25em; }
    .sm-uppercase   { text-transform: uppercase; }

    /* Small Position */
    .sm-absolute  { position: absolute; }
    .sm-fixed     { position: fixed; }
    .sm-relative  { position: relative; }
    .sm-z-index-1 { z-index: 1; }
    .sm-z-index-2 { z-index: 2; }
    .sm-z-index-3 { z-index: 3; }
    .sm-z-index-4 { z-index: 4; }
  }

  @media (min-width: 768px) {
    /* Medium Container */
    .md-max-width-sm { max-width: var(--width-sm); }
    .md-max-width-md { max-width: var(--width-md); }
    .md-max-width-lg { max-width: var(--width-lg); }
    .md-max-width-xl { max-width: var(--width-xl); }
    .md-width-25     { width: 25%; }
    .md-width-40     { width: 40%; }
    .md-width-50     { width: 50%; }
    .md-width-60     { width: 60%; }
    .md-width-75     { width: 75%; }
    .md-width-100    { width: 100%; }
    .md-width-thirds { width: calc(100% / 3); }

    /* Medium Display */
    .md-block        { display: block; }
    .md-inline-block { display: inline-block; }
    .md-hidden       { display: none; }

    /* Medium Flexbox */
    .md-flex            { display: flex; }
    .md-flex-none       { flex: none; }
    .md-flex-column     { flex-direction: column; }
    .md-flex-wrap       { flex-wrap: wrap; }
    .md-items-start     { align-items: flex-start; }
    .md-items-end       { align-items: flex-end; }
    .md-items-center    { align-items: center; }
    .md-items-baseline  { align-items: baseline; }
    .md-justify-start   { justify-content: flex-start; }
    .md-justify-end     { justify-content: flex-end; }
    .md-justify-center  { justify-content: center; }
    .md-justify-between { justify-content: space-between; }
    .md-justify-around  { justify-content: space-around; }
    .md-justify-evenly  { justify-content: space-evenly; }
    .md-content-start   { align-content: flex-start; }
    .md-content-end     { align-content: flex-end; }
    .md-content-center  { align-content: center; }
    .md-content-between { align-content: space-between; }
    .md-content-around  { align-content: space-around; }
    .md-content-stretch { align-content: stretch; }

    /* Medium Typography */
    .md-h1 { font-size: var(--h1); }
    .md-h2 { font-size: var(--h2); }
    .md-h3 { font-size: var(--h3); }
    .md-h4 { font-size: var(--h4); }
    .md-h5 { font-size: var(--h5); }
    .md-h6 { font-size: var(--h6); }
    .md-h7 { font-size: var(--h7); }

    .md-regular     { font-weight: 400; }
    .md-medium      { font-weight: 500; }
    .md-bold        { font-weight: 700; }
    .md-normal      { font-style: normal; }
    .md-italic      { font-style: italic; }
    .md-underline   { text-decoration: underline; }
    .md-text-center { text-align: center; }
    .md-text-left   { text-align: left; }
    .md-text-right  { text-align: right; }
    .md-lh-copy     { line-height: 1.5; }
    .md-lh-title    { line-height: 1; }
    .md-list-reset  { list-style: none; padding-left: 0; }
    .md-measure     { max-width: 32em; }
    .md-measure-sm  { max-width: 24em; }
    .md-nowrap      { white-space: nowrap; }
    .md-tracked     { letter-spacing: 0.25em; }
    .md-uppercase   { text-transform: uppercase; }

    /* Medium Position */
    .md-absolute  { position: absolute; }
    .md-fixed     { position: fixed; }
    .md-relative  { position: relative; }
    .md-z-index-1 { z-index: 1; }
    .md-z-index-2 { z-index: 2; }
    .md-z-index-3 { z-index: 3; }
    .md-z-index-4 { z-index: 4; }
  }

  @media (min-width: 960px) {
    /* Large Container */
    .lg-max-width-sm { max-width: var(--width-sm); }
    .lg-max-width-md { max-width: var(--width-md); }
    .lg-max-width-lg { max-width: var(--width-lg); }
    .lg-max-width-xl { max-width: var(--width-xl); }
    .lg-width-25     { width: 25%; }
    .lg-width-40     { width: 40%; }
    .lg-width-50     { width: 50%; }
    .lg-width-60     { width: 60%; }
    .lg-width-75     { width: 75%; }
    .lg-width-100    { width: 100%; }
    .lg-width-thirds { width: calc(100% / 3); }

    /* Large Display */
    .lg-block        { display: block; }
    .lg-inline-block { display: inline-block; }
    .lg-hidden       { display: none; }

    /* Large Flexbox */
    .lg-flex            { display: flex; }
    .lg-flex-none       { flex: none; }
    .lg-flex-column     { flex-direction: column; }
    .lg-flex-wrap       { flex-wrap: wrap; }
    .lg-items-start     { align-items: flex-start; }
    .lg-items-end       { align-items: flex-end; }
    .lg-items-center    { align-items: center; }
    .lg-items-baseline  { align-items: baseline; }
    .lg-justify-start   { justify-content: flex-start; }
    .lg-justify-end     { justify-content: flex-end; }
    .lg-justify-center  { justify-content: center; }
    .lg-justify-between { justify-content: space-between; }
    .lg-justify-around  { justify-content: space-around; }
    .lg-justify-evenly  { justify-content: space-evenly; }
    .lg-content-start   { align-content: flex-start; }
    .lg-content-end     { align-content: flex-end; }
    .lg-content-center  { align-content: center; }
    .lg-content-between { align-content: space-between; }
    .lg-content-around  { align-content: space-around; }
    .lg-content-stretch { align-content: stretch; }

    /* Large Typography */
    .lg-h1 { font-size: var(--h1); }
    .lg-h2 { font-size: var(--h2); }
    .lg-h3 { font-size: var(--h3); }
    .lg-h4 { font-size: var(--h4); }
    .lg-h5 { font-size: var(--h5); }
    .lg-h6 { font-size: var(--h6); }
    .lg-h7 { font-size: var(--h7); }

    .lg-regular     { font-weight: 400; }
    .lg-medium      { font-weight: 500; }
    .lg-bold        { font-weight: 700; }
    .lg-normal      { font-style: normal; }
    .lg-italic      { font-style: italic; }
    .lg-underline   { text-decoration: underline; }
    .lg-text-center { text-align: center; }
    .lg-text-left   { text-align: left; }
    .lg-text-right  { text-align: right; }
    .lg-lh-copy     { line-height: 1.5; }
    .lg-lh-title    { line-height: 1; }
    .lg-list-reset  { list-style: none; padding-left: 0; }
    .lg-measure     { max-width: 32em; }
    .lg-measure-sm  { max-width: 24em; }
    .lg-nowrap      { white-space: nowrap; }
    .lg-tracked     { letter-spacing: 0.25em; }
    .lg-uppercase   { text-transform: uppercase; }

    /* Large Position */
    .lg-absolute  { position: absolute; }
    .lg-fixed     { position: fixed; }
    .lg-relative  { position: relative; }
    .lg-z-index-1 { z-index: 1; }
    .lg-z-index-2 { z-index: 2; }
    .lg-z-index-3 { z-index: 3; }
    .lg-z-index-4 { z-index: 4; }
  }
}