style-forge.media/src/mobile/padding.css

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

@media only screen and (max-width: 600px) {
  .\@mob\:p { padding: var(--sf-rem) }
  .\@mob\:p\:0 { padding: 0 }
  .\@mob\:p\:xs { padding: var(--sf-rem-xs) }
  .\@mob\:p\:sm { padding: var(--sf-rem-sm) }
  .\@mob\:p\:s { padding: var(--sf-rem-s) }
  .\@mob\:p\:ms { padding: var(--sf-rem-ms) }
  .\@mob\:p\:ls { padding: var(--sf-rem-ls) }
  .\@mob\:p\:md { padding: var(--sf-rem-md) }
  .\@mob\:p\:lg { padding: var(--sf-rem-lg) }
  .\@mob\:p\:xl { padding: var(--sf-rem-xl) }
  .\@mob\:p\:2xl { padding: var(--sf-rem-2xl) }
  .\@mob\:p\:3xl { padding: var(--sf-rem-3xl) }
  .\@mob\:p\:4xl { padding: var(--sf-rem-4xl) }
  .\@mob\:p\:5xl { padding: var(--sf-rem-5xl) }
  .\@mob\:p\:6xl { padding: var(--sf-rem-6xl) }
  .\@mob\:p\:7xl { padding: var(--sf-rem-7xl) }
  .\@mob\:p\:8xl { padding: var(--sf-rem-8xl) }
  .\@mob\:p\:9xl { padding: var(--sf-rem-9xl) }
  .\@mob\:p\:10xl { padding: var(--sf-rem-10xl) }
  .\@mob\:p\:11xl { padding: var(--sf-rem-11xl) }
  .\@mob\:p\:12xl { padding: var(--sf-rem-12xl) }

  .\@mob\:pt { padding-block-start: var(--sf-rem) }
  .\@mob\:pt\:0 { padding-block-start: 0 }
  .\@mob\:pt\:xs { padding-block-start: var(--sf-rem-xs) }
  .\@mob\:pt\:sm { padding-block-start: var(--sf-rem-sm) }
  .\@mob\:pt\:s { padding-block-start: var(--sf-rem-s) }
  .\@mob\:pt\:ms { padding-block-start: var(--sf-rem-ms) }
  .\@mob\:pt\:ls { padding-block-start: var(--sf-rem-ls) }
  .\@mob\:pt\:md { padding-block-start: var(--sf-rem-md) }
  .\@mob\:pt\:lg { padding-block-start: var(--sf-rem-lg) }
  .\@mob\:pt\:xl { padding-block-start: var(--sf-rem-xl) }
  .\@mob\:pt\:2xl { padding-block-start: var(--sf-rem-2xl) }
  .\@mob\:pt\:3xl { padding-block-start: var(--sf-rem-3xl) }
  .\@mob\:pt\:4xl { padding-block-start: var(--sf-rem-4xl) }
  .\@mob\:pt\:5xl { padding-block-start: var(--sf-rem-5xl) }
  .\@mob\:pt\:6xl { padding-block-start: var(--sf-rem-6xl) }
  .\@mob\:pt\:7xl { padding-block-start: var(--sf-rem-7xl) }
  .\@mob\:pt\:8xl { padding-block-start: var(--sf-rem-8xl) }
  .\@mob\:pt\:9xl { padding-block-start: var(--sf-rem-9xl) }
  .\@mob\:pt\:10xl { padding-block-start: var(--sf-rem-10xl) }
  .\@mob\:pt\:11xl { padding-block-start: var(--sf-rem-11xl) }
  .\@mob\:pt\:12xl { padding-block-start: var(--sf-rem-12xl) }

  .\@mob\:pr { padding-inline-end: var(--sf-rem) }
  .\@mob\:pr\:0 { padding-inline-end: 0 }
  .\@mob\:pr\:xs { padding-inline-end: var(--sf-rem-xs) }
  .\@mob\:pr\:sm { padding-inline-end: var(--sf-rem-sm) }
  .\@mob\:pr\:s { padding-inline-end: var(--sf-rem-s) }
  .\@mob\:pr\:ms { padding-inline-end: var(--sf-rem-ms) }
  .\@mob\:pr\:ls { padding-inline-end: var(--sf-rem-ls) }
  .\@mob\:pr\:md { padding-inline-end: var(--sf-rem-md) }
  .\@mob\:pr\:lg { padding-inline-end: var(--sf-rem-lg) }
  .\@mob\:pr\:xl { padding-inline-end: var(--sf-rem-xl) }
  .\@mob\:pr\:2xl { padding-inline-end: var(--sf-rem-2xl) }
  .\@mob\:pr\:3xl { padding-inline-end: var(--sf-rem-3xl) }
  .\@mob\:pr\:4xl { padding-inline-end: var(--sf-rem-4xl) }
  .\@mob\:pr\:5xl { padding-inline-end: var(--sf-rem-5xl) }
  .\@mob\:pr\:6xl { padding-inline-end: var(--sf-rem-6xl) }
  .\@mob\:pr\:7xl { padding-inline-end: var(--sf-rem-7xl) }
  .\@mob\:pr\:8xl { padding-inline-end: var(--sf-rem-8xl) }
  .\@mob\:pr\:9xl { padding-inline-end: var(--sf-rem-9xl) }
  .\@mob\:pr\:10xl { padding-inline-end: var(--sf-rem-10xl) }
  .\@mob\:pr\:11xl { padding-inline-end: var(--sf-rem-11xl) }
  .\@mob\:pr\:12xl { padding-inline-end: var(--sf-rem-12xl) }

  .\@mob\:pb { padding-block-end: var(--sf-rem) }
  .\@mob\:pb\:0 { padding-block-end: 0 }
  .\@mob\:pb\:xs { padding-block-end: var(--sf-rem-xs) }
  .\@mob\:pb\:sm { padding-block-end: var(--sf-rem-sm) }
  .\@mob\:pb\:s { padding-block-end: var(--sf-rem-s) }
  .\@mob\:pb\:ms { padding-block-end: var(--sf-rem-ms) }
  .\@mob\:pb\:ls { padding-block-end: var(--sf-rem-ls) }
  .\@mob\:pb\:md { padding-block-end: var(--sf-rem-md) }
  .\@mob\:pb\:lg { padding-block-end: var(--sf-rem-lg) }
  .\@mob\:pb\:xl { padding-block-end: var(--sf-rem-xl) }
  .\@mob\:pb\:2xl { padding-block-end: var(--sf-rem-2xl) }
  .\@mob\:pb\:3xl { padding-block-end: var(--sf-rem-3xl) }
  .\@mob\:pb\:4xl { padding-block-end: var(--sf-rem-4xl) }
  .\@mob\:pb\:5xl { padding-block-end: var(--sf-rem-5xl) }
  .\@mob\:pb\:6xl { padding-block-end: var(--sf-rem-6xl) }
  .\@mob\:pb\:7xl { padding-block-end: var(--sf-rem-7xl) }
  .\@mob\:pb\:8xl { padding-block-end: var(--sf-rem-8xl) }
  .\@mob\:pb\:9xl { padding-block-end: var(--sf-rem-9xl) }
  .\@mob\:pb\:10xl { padding-block-end: var(--sf-rem-10xl) }
  .\@mob\:pb\:11xl { padding-block-end: var(--sf-rem-11xl) }
  .\@mob\:pb\:12xl { padding-block-end: var(--sf-rem-12xl) }

  .\@mob\:pl { padding-inline-start: var(--sf-rem) }
  .\@mob\:pl\:0 { padding-inline-start: 0 }
  .\@mob\:pl\:xs { padding-inline-start: var(--sf-rem-xs) }
  .\@mob\:pl\:sm { padding-inline-start: var(--sf-rem-sm) }
  .\@mob\:pl\:s { padding-inline-start: var(--sf-rem-s) }
  .\@mob\:pl\:ms { padding-inline-start: var(--sf-rem-ms) }
  .\@mob\:pl\:ls { padding-inline-start: var(--sf-rem-ls) }
  .\@mob\:pl\:md { padding-inline-start: var(--sf-rem-md) }
  .\@mob\:pl\:lg { padding-inline-start: var(--sf-rem-lg) }
  .\@mob\:pl\:xl { padding-inline-start: var(--sf-rem-xl) }
  .\@mob\:pl\:2xl { padding-inline-start: var(--sf-rem-2xl) }
  .\@mob\:pl\:3xl { padding-inline-start: var(--sf-rem-3xl) }
  .\@mob\:pl\:4xl { padding-inline-start: var(--sf-rem-4xl) }
  .\@mob\:pl\:5xl { padding-inline-start: var(--sf-rem-5xl) }
  .\@mob\:pl\:6xl { padding-inline-start: var(--sf-rem-6xl) }
  .\@mob\:pl\:7xl { padding-inline-start: var(--sf-rem-7xl) }
  .\@mob\:pl\:8xl { padding-inline-start: var(--sf-rem-8xl) }
  .\@mob\:pl\:9xl { padding-inline-start: var(--sf-rem-9xl) }
  .\@mob\:pl\:10xl { padding-inline-start: var(--sf-rem-10xl) }
  .\@mob\:pl\:11xl { padding-inline-start: var(--sf-rem-11xl) }
  .\@mob\:pl\:12xl { padding-inline-start: var(--sf-rem-12xl) }

  .\@mob\:px { padding-inline: var(--sf-rem) }
  .\@mob\:px\:0 { padding-inline: 0 }
  .\@mob\:px\:xs { padding-inline: var(--sf-rem-xs) }
  .\@mob\:px\:sm { padding-inline: var(--sf-rem-sm) }
  .\@mob\:px\:s { padding-inline: var(--sf-rem-s) }
  .\@mob\:px\:ms { padding-inline: var(--sf-rem-ms) }
  .\@mob\:px\:ls { padding-inline: var(--sf-rem-ls) }
  .\@mob\:px\:md { padding-inline: var(--sf-rem-md) }
  .\@mob\:px\:lg { padding-inline: var(--sf-rem-lg) }
  .\@mob\:px\:xl { padding-inline: var(--sf-rem-xl) }
  .\@mob\:px\:2xl { padding-inline: var(--sf-rem-2xl) }
  .\@mob\:px\:3xl { padding-inline: var(--sf-rem-3xl) }
  .\@mob\:px\:4xl { padding-inline: var(--sf-rem-4xl) }
  .\@mob\:px\:5xl { padding-inline: var(--sf-rem-5xl) }
  .\@mob\:px\:6xl { padding-inline: var(--sf-rem-6xl) }
  .\@mob\:px\:7xl { padding-inline: var(--sf-rem-7xl) }
  .\@mob\:px\:8xl { padding-inline: var(--sf-rem-8xl) }
  .\@mob\:px\:9xl { padding-inline: var(--sf-rem-9xl) }
  .\@mob\:px\:10xl { padding-inline: var(--sf-rem-10xl) }
  .\@mob\:px\:11xl { padding-inline: var(--sf-rem-11xl) }
  .\@mob\:px\:12xl { padding-inline: var(--sf-rem-12xl) }

  .\@mob\:py { padding-block: var(--sf-rem) }
  .\@mob\:py\:0 { padding-block: 0 }
  .\@mob\:py\:xs { padding-block: var(--sf-rem-xs) }
  .\@mob\:py\:sm { padding-block: var(--sf-rem-sm) }
  .\@mob\:py\:s { padding-block: var(--sf-rem-s) }
  .\@mob\:py\:ms { padding-block: var(--sf-rem-ms) }
  .\@mob\:py\:ls { padding-block: var(--sf-rem-ls) }
  .\@mob\:py\:md { padding-block: var(--sf-rem-md) }
  .\@mob\:py\:lg { padding-block: var(--sf-rem-lg) }
  .\@mob\:py\:xl { padding-block: var(--sf-rem-xl) }
  .\@mob\:py\:2xl { padding-block: var(--sf-rem-2xl) }
  .\@mob\:py\:3xl { padding-block: var(--sf-rem-3xl) }
  .\@mob\:py\:4xl { padding-block: var(--sf-rem-4xl) }
  .\@mob\:py\:5xl { padding-block: var(--sf-rem-5xl) }
  .\@mob\:py\:6xl { padding-block: var(--sf-rem-6xl) }
  .\@mob\:py\:7xl { padding-block: var(--sf-rem-7xl) }
  .\@mob\:py\:8xl { padding-block: var(--sf-rem-8xl) }
  .\@mob\:py\:9xl { padding-block: var(--sf-rem-9xl) }
  .\@mob\:py\:10xl { padding-block: var(--sf-rem-10xl) }
  .\@mob\:py\:11xl { padding-block: var(--sf-rem-11xl) }
  .\@mob\:py\:12xl { padding-block: var(--sf-rem-12xl) }

  /* /// */

  html.var .\@mob\:p { padding: 8px }
  html.var .\@mob\:p\:0 { padding: 0 }
  html.var .\@mob\:p\:xs { padding: 4px }
  html.var .\@mob\:p\:sm { padding: 8px }
  html.var .\@mob\:p\:s { padding: 10px }
  html.var .\@mob\:p\:ms { padding: 12px }
  html.var .\@mob\:p\:ls { padding: 14px }
  html.var .\@mob\:p\:md { padding: 16px }
  html.var .\@mob\:p\:lg { padding: 18px }
  html.var .\@mob\:p\:xl { padding: 20px }
  html.var .\@mob\:p\:2xl { padding: 24px }
  html.var .\@mob\:p\:3xl { padding: 32px }
  html.var .\@mob\:p\:4xl { padding: 40px }
  html.var .\@mob\:p\:5xl { padding: 48px }
  html.var .\@mob\:p\:6xl { padding: 56px }
  html.var .\@mob\:p\:7xl { padding: 64px }
  html.var .\@mob\:p\:8xl { padding: 72px }
  html.var .\@mob\:p\:9xl { padding: 80px }
  html.var .\@mob\:p\:10xl { padding: 88px }
  html.var .\@mob\:p\:11xl { padding: 96px }
  html.var .\@mob\:p\:12xl { padding: 104px }

  html.var .\@mob\:pt { padding-top: 8px }
  html.var .\@mob\:pt\:0 { padding-top: 0 }
  html.var .\@mob\:pt\:xs { padding-top: 4px }
  html.var .\@mob\:pt\:sm { padding-top: 8px }
  html.var .\@mob\:pt\:s { padding-top: 10px }
  html.var .\@mob\:pt\:ms { padding-top: 12px }
  html.var .\@mob\:pt\:ls { padding-top: 14px }
  html.var .\@mob\:pt\:md { padding-top: 16px }
  html.var .\@mob\:pt\:lg { padding-top: 18px }
  html.var .\@mob\:pt\:xl { padding-top: 20px }
  html.var .\@mob\:pt\:2xl { padding-top: 24px }
  html.var .\@mob\:pt\:3xl { padding-top: 32px }
  html.var .\@mob\:pt\:4xl { padding-top: 40px }
  html.var .\@mob\:pt\:5xl { padding-top: 48px }
  html.var .\@mob\:pt\:6xl { padding-top: 56px }
  html.var .\@mob\:pt\:7xl { padding-top: 64px }
  html.var .\@mob\:pt\:8xl { padding-top: 72px }
  html.var .\@mob\:pt\:9xl { padding-top: 80px }
  html.var .\@mob\:pt\:10xl { padding-top: 88px }
  html.var .\@mob\:pt\:11xl { padding-top: 96px }
  html.var .\@mob\:pt\:12xl { padding-top: 104px }

  html.var .\@mob\:pr { padding-right: 8px }
  html.var .\@mob\:pr\:0 { padding-right: 0 }
  html.var .\@mob\:pr\:xs { padding-right: 4px }
  html.var .\@mob\:pr\:sm { padding-right: 8px }
  html.var .\@mob\:pr\:s { padding-right: 10px }
  html.var .\@mob\:pr\:ms { padding-right: 12px }
  html.var .\@mob\:pr\:ls { padding-right: 14px }
  html.var .\@mob\:pr\:md { padding-right: 16px }
  html.var .\@mob\:pr\:lg { padding-right: 18px }
  html.var .\@mob\:pr\:xl { padding-right: 20px }
  html.var .\@mob\:pr\:2xl { padding-right: 24px }
  html.var .\@mob\:pr\:3xl { padding-right: 32px }
  html.var .\@mob\:pr\:4xl { padding-right: 40px }
  html.var .\@mob\:pr\:5xl { padding-right: 48px }
  html.var .\@mob\:pr\:6xl { padding-right: 56px }
  html.var .\@mob\:pr\:7xl { padding-right: 64px }
  html.var .\@mob\:pr\:8xl { padding-right: 72px }
  html.var .\@mob\:pr\:9xl { padding-right: 80px }
  html.var .\@mob\:pr\:10xl { padding-right: 88px }
  html.var .\@mob\:pr\:11xl { padding-right: 96px }
  html.var .\@mob\:pr\:12xl { padding-right: 104px }

  html.var .\@mob\:pb { padding-bottom: 8px }
  html.var .\@mob\:pb\:0 { padding-bottom: 0 }
  html.var .\@mob\:pb\:xs { padding-bottom: 4px }
  html.var .\@mob\:pb\:sm { padding-bottom: 8px }
  html.var .\@mob\:pb\:s { padding-bottom: 10px }
  html.var .\@mob\:pb\:ms { padding-bottom: 12px }
  html.var .\@mob\:pb\:ls { padding-bottom: 14px }
  html.var .\@mob\:pb\:md { padding-bottom: 16px }
  html.var .\@mob\:pb\:lg { padding-bottom: 18px }
  html.var .\@mob\:pb\:xl { padding-bottom: 20px }
  html.var .\@mob\:pb\:2xl { padding-bottom: 24px }
  html.var .\@mob\:pb\:3xl { padding-bottom: 32px }
  html.var .\@mob\:pb\:4xl { padding-bottom: 40px }
  html.var .\@mob\:pb\:5xl { padding-bottom: 48px }
  html.var .\@mob\:pb\:6xl { padding-bottom: 56px }
  html.var .\@mob\:pb\:7xl { padding-bottom: 64px }
  html.var .\@mob\:pb\:8xl { padding-bottom: 72px }
  html.var .\@mob\:pb\:9xl { padding-bottom: 80px }
  html.var .\@mob\:pb\:10xl { padding-bottom: 88px }
  html.var .\@mob\:pb\:11xl { padding-bottom: 96px }
  html.var .\@mob\:pb\:12xl { padding-bottom: 104px }

  html.var .\@mob\:pl { padding-left: 8px }
  html.var .\@mob\:pl\:0 { padding-left: 0 }
  html.var .\@mob\:pl\:xs { padding-left: 4px }
  html.var .\@mob\:pl\:sm { padding-left: 8px }
  html.var .\@mob\:pl\:s { padding-left: 10px }
  html.var .\@mob\:pl\:ms { padding-left: 12px }
  html.var .\@mob\:pl\:ls { padding-left: 14px }
  html.var .\@mob\:pl\:md { padding-left: 16px }
  html.var .\@mob\:pl\:lg { padding-left: 18px }
  html.var .\@mob\:pl\:xl { padding-left: 20px }
  html.var .\@mob\:pl\:2xl { padding-left: 24px }
  html.var .\@mob\:pl\:3xl { padding-left: 32px }
  html.var .\@mob\:pl\:4xl { padding-left: 40px }
  html.var .\@mob\:pl\:5xl { padding-left: 48px }
  html.var .\@mob\:pl\:6xl { padding-left: 56px }
  html.var .\@mob\:pl\:7xl { padding-left: 64px }
  html.var .\@mob\:pl\:8xl { padding-left: 72px }
  html.var .\@mob\:pl\:9xl { padding-left: 80px }
  html.var .\@mob\:pl\:10xl { padding-left: 88px }
  html.var .\@mob\:pl\:11xl { padding-left: 96px }
  html.var .\@mob\:pl\:12xl { padding-left: 104px }

  html.var .\@mob\:px { padding-left: 8px; padding-right: 8px }
  html.var .\@mob\:px\:0 { padding-left: 0; padding-right: 0 }
  html.var .\@mob\:px\:xs { padding-left: 4px; padding-right: 4px }
  html.var .\@mob\:px\:sm { padding-left: 8px; padding-right: 8px }
  html.var .\@mob\:px\:s { padding-left: 10px; padding-right: 10px }
  html.var .\@mob\:px\:ms { padding-left: 12px; padding-right: 12px }
  html.var .\@mob\:px\:ls { padding-left: 14px; padding-right: 14px }
  html.var .\@mob\:px\:md { padding-left: 16px; padding-right: 16px }
  html.var .\@mob\:px\:lg { padding-left: 18px; padding-right: 18px }
  html.var .\@mob\:px\:xl { padding-left: 20px; padding-right: 20px }
  html.var .\@mob\:px\:2xl { padding-left: 24px; padding-right: 24px }
  html.var .\@mob\:px\:3xl { padding-left: 32px; padding-right: 32px }
  html.var .\@mob\:px\:4xl { padding-left: 40px; padding-right: 40px }
  html.var .\@mob\:px\:5xl { padding-left: 48px; padding-right: 48px }
  html.var .\@mob\:px\:6xl { padding-left: 56px; padding-right: 56px }
  html.var .\@mob\:px\:7xl { padding-left: 64px; padding-right: 64px }
  html.var .\@mob\:px\:8xl { padding-left: 72px; padding-right: 72px }
  html.var .\@mob\:px\:9xl { padding-left: 80px; padding-right: 80px }
  html.var .\@mob\:px\:10xl { padding-left: 88px; padding-right: 88px }
  html.var .\@mob\:px\:11xl { padding-left: 96px; padding-right: 96px }
  html.var .\@mob\:px\:12xl { padding-left: 104px; padding-right: 104px }

  html.var .\@mob\:py { padding-top: 8px; padding-bottom: 8px }
  html.var .\@mob\:py\:0 { padding-top: 0; padding-bottom: 0 }
  html.var .\@mob\:py\:xs { padding-top: 4px; padding-bottom: 4px }
  html.var .\@mob\:py\:sm { padding-top: 8px; padding-bottom: 8px }
  html.var .\@mob\:py\:s { padding-top: 10px; padding-bottom: 10px }
  html.var .\@mob\:py\:ms { padding-top: 12px; padding-bottom: 12px }
  html.var .\@mob\:py\:ls { padding-top: 14px; padding-bottom: 14px }
  html.var .\@mob\:py\:md { padding-top: 16px; padding-bottom: 16px }
  html.var .\@mob\:py\:lg { padding-top: 18px; padding-bottom: 18px }
  html.var .\@mob\:py\:xl { padding-top: 20px; padding-bottom: 20px }
  html.var .\@mob\:py\:2xl { padding-top: 24px; padding-bottom: 24px }
  html.var .\@mob\:py\:3xl { padding-top: 32px; padding-bottom: 32px }
  html.var .\@mob\:py\:4xl { padding-top: 40px; padding-bottom: 40px }
  html.var .\@mob\:py\:5xl { padding-top: 48px; padding-bottom: 48px }
  html.var .\@mob\:py\:6xl { padding-top: 56px; padding-bottom: 56px }
  html.var .\@mob\:py\:7xl { padding-top: 64px; padding-bottom: 64px }
  html.var .\@mob\:py\:8xl { padding-top: 72px; padding-bottom: 72px }
  html.var .\@mob\:py\:9xl { padding-top: 80px; padding-bottom: 80px }
  html.var .\@mob\:py\:10xl { padding-top: 88px; padding-bottom: 88px }
  html.var .\@mob\:py\:11xl { padding-top: 96px; padding-bottom: 96px }
  html.var .\@mob\:py\:12xl { padding-top: 104px; padding-bottom: 104px }
}