18F/18f.gsa.gov

/*
========================================
ASPECT
----------------------------------------
usage:
  .aspect-[value]
----------------------------------------
output:
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 100%;
----------------------------------------
example:
  .aspect-16x9
----------------------------------------
*/

$add-aspect: (
  add-aspect: (
    base: "add-aspect",
    modifiers: null,
    values: (
      9x16: (
        slug: "9x16",
        isReadable: true,
        content: relative,
        extend: (
          "box-sizing": border-box,
          "height": 0,
          "overflow": hidden,
          "padding": 0 0 177.77778%
        )
      ),
      1x1: (
        slug: "1x1",
        isReadable: true,
        content: relative,
        extend: (
          "box-sizing": border-box,
          "height": 0,
          "overflow": hidden,
          "padding": 0 0 100%
        )
      ),
      4x3: (
        slug: "4x3",
        isReadable: true,
        content: relative,
        extend: (
          "box-sizing": border-box,
          "height": 0,
          "overflow": hidden,
          "padding": 0 0 75%
        )
      ),
      16x9: (
        slug: "16x9",
        isReadable: true,
        content: relative,
        extend: (
          "box-sizing": border-box,
          "height": 0,
          "overflow": hidden,
          "padding": 0 0 56.25%
        )
      ),
      2x1: (
        slug: "2x1",
        isReadable: true,
        content: relative,
        extend: (
          "box-sizing": border-box,
          "height": 0,
          "overflow": hidden,
          "padding": 0 0 50%
        )
      )
    ),
    settings: $add-aspect-settings,
    property: "position",
    type: "object"
  )
);