mixin SizingDoc
  p.mt-2.mb-0 Includes support for 
    code.highlighter-rouge 25% 
    |  ,
    code.highlighter-rouge 50% 
    |  ,
    code.highlighter-rouge 75% 
    |  , and 
    code.highlighter-rouge 100% 
    |   by default. The classes are named using the format 
    code {property}-{size}
    |  for 
    code xs 
    |  and 
    code {property}-{breakpoint}-{size}
    |  for 
    code sm 
    | ,
    code md 
    | ,
    code lg 
    | ,
    code xl 
    |  and 
    code xxl
    | .

mixin SizingWidth
  .bg-100.text-dark.p-2.border.border-dashed.mb-3.w-100
    code .w-100
  .bg-100.text-dark.p-2.border.border-dashed.mb-3.w-75
    code .w-75
  .bg-100.text-dark.p-2.border.border-dashed.mb-3.w-50
    code .w-50
  .bg-100.text-dark.p-2.border.border-dashed.mb-3.w-25
    code .w-25
  .bg-100.text-dark.p-2.border.border-dashed.mb-3.w-auto
    code .w-auto

mixin SizingHeight
  .vh-50.text-dark.py-3
    .row.h-100
      .col
        .bg-100.p-2.border.border-dashed.mb-3.h-100
          code .h-100
      .col
        .bg-100.p-2.border.border-dashed.mb-3.h-75
          code .h-75
      .col
        .bg-100.p-2.border.border-dashed.mb-3.h-50
          code .h-50
      .col
        .bg-100.p-2.border.border-dashed.mb-3.h-25
          code .h-25
      .col
        .bg-100.p-2.border.border-dashed.mb-3.h-auto
          code .h-auto

mixin SizingSpecialClassDescription
  p&attributes(attributes) Responsive variations also exist for sizing classes relative to the 
    code viewport
    | . Here are all the support classes:

mixin SizingSpecial
  pre.rounded-3
    code.lang-css.
      #{'.mw-100 { max-width: 100%; }'}
      #{'.min-vw-100 { min-width: 100vw; }'}
      #{'.vw-100 { width: 100vw; }'}
      #{'.max-vh-100 { max-height: 100vh; }'}
      #{'.max-vh-75 { max-height: 75vh; }'}
      #{'.max-vh-50 { max-height: 50vh; }'}
      #{'.max-vh-25 { max-height: 25vh; }'}
      #{'.min-vh-100 { min-height: 100vh; }'}
      #{'.min-vh-75 { min-height: 75vh; }'}
      #{'.min-vh-50 { min-height: 50vh; }'}
      #{'.min-vh-25 { min-height: 25vh; }'}
      #{'.vh-100 { height: 100vh !important; }'}
      #{'.vh-75 { height: 75vh !important; }'}
      #{'.vh-50 { height: 50vh !important; }'}
      #{'.vh-25 { height: 25vh !important; }'}
      #{'.max-vh-sm-100 { max-height: 100vh; }'}
      #{'.max-vh-sm-75 { max-height: 75vh; }'}
      #{'.max-vh-sm-50 { max-height: 50vh; }'}
      #{'.max-vh-sm-25 { max-height: 25vh; }'}
      #{'.min-vh-sm-100 { min-height: 100vh; }'}
      #{'.min-vh-sm-75 { min-height: 75vh; }'}
      #{'.min-vh-sm-50 { min-height: 50vh; }'}
      #{'.min-vh-sm-25 { min-height: 25vh; }'}
      #{'.vh-sm-100 { height: 100vh !important; }'}
      #{'.vh-sm-75 { height: 75vh !important; }'}
      #{'.vh-sm-50 { height: 50vh !important; }'}
      #{'.vh-sm-25 { height: 25vh !important; }'}
      #{'.max-vh-md-100 { max-height: 100vh; }'}
      #{'.max-vh-md-75 { max-height: 75vh; }'}
      #{'.max-vh-md-50 { max-height: 50vh; }'}
      #{'.max-vh-md-25 { max-height: 25vh; }'}
      #{'.min-vh-md-100 { min-height: 100vh; }'}
      #{'.min-vh-md-75 { min-height: 75vh; }'}
      #{'.min-vh-md-50 { min-height: 50vh; }'}
      #{'.min-vh-md-25 { min-height: 25vh; }'}
      #{'.vh-md-100 { height: 100vh !important; }'}
      #{'.vh-md-75 { height: 75vh !important; }'}
      #{'.vh-md-50 { height: 50vh !important; }'}
      #{'.vh-md-25 { height: 25vh !important; }'}
      #{'.max-vh-lg-100 { max-height: 100vh; }'}
      #{'.max-vh-lg-75 { max-height: 75vh; }'}
      #{'.max-vh-lg-50 { max-height: 50vh; }'}
      #{'.max-vh-lg-25 { max-height: 25vh; }'}
      #{'.min-vh-lg-100 { min-height: 100vh; }'}
      #{'.min-vh-lg-75 { min-height: 75vh; }'}
      #{'.min-vh-lg-50 { min-height: 50vh; }'}
      #{'.min-vh-lg-25 { min-height: 25vh; }'}
      #{'.vh-lg-100 { height: 100vh !important; }'}
      #{'.vh-lg-75 { height: 75vh !important; }'}
      #{'.vh-lg-50 { height: 50vh !important; }'}
      #{'.vh-lg-25 { height: 25vh !important; }'}
      #{'.max-vh-xl-100 { max-height: 100vh; }'}
      #{'.max-vh-xl-75 { max-height: 75vh; }'}
      #{'.max-vh-xl-50 { max-height: 50vh; }'}
      #{'.max-vh-xl-25 { max-height: 25vh; }'}
      #{'.min-vh-xl-100 { min-height: 100vh; }'}
      #{'.min-vh-xl-75 { min-height: 75vh; }'}
      #{'.min-vh-xl-50 { min-height: 50vh; }'}
      #{'.min-vh-xl-25 { min-height: 25vh; }'}
      #{'.vh-xl-100 { height: 100vh !important; }'}
      #{'.vh-xl-75 { height: 75vh !important; }'}
      #{'.vh-xl-50 { height: 50vh !important; }'}
      #{'.vh-xl-25 { height: 25vh !important; }'}
      #{'.max-vh-xxl-100 { max-height: 100vh; }'}
      #{'.max-vh-xxl-75 { max-height: 75vh; }'}
      #{'.max-vh-xxl-50 { max-height: 50vh; }'}
      #{'.max-vh-xxl-25 { max-height: 25vh; }'}
      #{'.min-vh-xxl-100 { min-height: 100vh; }'}
      #{'.min-vh-xxl-75 { min-height: 75vh; }'}
      #{'.min-vh-xxl-50 { min-height: 50vh; }'}
      #{'.min-vh-xxl-25 { min-height: 25vh; }'}
      #{'.vh-xxl-100 { height: 100vh !important; }'}
      #{'.vh-xxl-75 { height: 75vh !important; }'}
      #{'.vh-xxl-50 { height: 50vh !important; }'}
      #{'.vh-xxl-25 { height: 25vh !important; }'}