/* skarn-framework — utility classes (content / narrative pages).
 * ===========================================================
 * Ported 1:1 from the reference design system, mapped onto the --sh-*
 * theme bridge so every theme colours them. All breakpoints (sm/md/lg/
 * xl/xxl) are included. Prefix is `skf-` (framework-namespaced).
 */

/*
 * Skarn UI — Utilities（工具类，含全断点变体）
 *
 * 断点：sm 576 / md 768 / lg 992 / xl 1200 / xxl 1400（移动优先）
 * 间距刻度：0..6 对应 0 / 0.5rem / 1rem / 1.5rem / 2rem / 2.5rem / 3rem（8px 节奏）
 * 方向后缀：t 上 / e 右（inline-end）/ b 下 / s 左（inline-start）/ x 水平 / y 垂直
 */

/* ================= 显示 (Display) ================= */
.skf-d-none { display: none; }
.skf-d-inline { display: inline; }
.skf-d-inline-block { display: inline-block; }
.skf-d-block { display: block; }
.skf-d-grid { display: grid; }
.skf-d-inline-grid { display: inline-grid; }
.skf-d-flex { display: flex; }
.skf-d-inline-flex { display: inline-flex; }
.skf-d-table { display: table; }
.skf-d-table-cell { display: table-cell; }
.skf-d-table-row { display: table-row; }

/* ================= Flex ================= */
.skf-flex-row { flex-direction: row; }
.skf-flex-row-reverse { flex-direction: row-reverse; }
.skf-flex-column { flex-direction: column; }
.skf-flex-column-reverse { flex-direction: column-reverse; }
.skf-flex-wrap { flex-wrap: wrap; }
.skf-flex-nowrap { flex-wrap: nowrap; }
.skf-flex-wrap-reverse { flex-wrap: wrap-reverse; }
.skf-flex-fill { flex: 1 1 auto; }
.skf-flex-grow-0 { flex-grow: 0; }
.skf-flex-grow-1 { flex-grow: 1; }
.skf-flex-shrink-0 { flex-shrink: 0; }
.skf-flex-shrink-1 { flex-shrink: 1; }
.skf-justify-content-start { justify-content: flex-start; }
.skf-justify-content-end { justify-content: flex-end; }
.skf-justify-content-center { justify-content: center; }
.skf-justify-content-between { justify-content: space-between; }
.skf-justify-content-around { justify-content: space-around; }
.skf-justify-content-evenly { justify-content: space-evenly; }
.skf-align-items-start { align-items: flex-start; }
.skf-align-items-end { align-items: flex-end; }
.skf-align-items-center { align-items: center; }
.skf-align-items-baseline { align-items: baseline; }
.skf-align-items-stretch { align-items: stretch; }
.skf-align-content-start { align-content: flex-start; }
.skf-align-content-end { align-content: flex-end; }
.skf-align-content-center { align-content: center; }
.skf-align-content-between { align-content: space-between; }
.skf-align-content-around { align-content: space-around; }
.skf-align-content-stretch { align-content: stretch; }
.skf-align-self-auto { align-self: auto; }
.skf-align-self-start { align-self: flex-start; }
.skf-align-self-end { align-self: flex-end; }
.skf-align-self-center { align-self: center; }
.skf-align-self-baseline { align-self: baseline; }
.skf-align-self-stretch { align-self: stretch; }
.skf-order-first { order: -1; }
.skf-order-last { order: 6; }

/* ================= 间距 (Spacing) ================= */
/* ---- margin ---- */
.skf-m-0 { margin: 0; }
.skf-m-1 { margin: var(--skf-space-1); }
.skf-m-2 { margin: var(--skf-space-2); }
.skf-m-3 { margin: var(--skf-space-3); }
.skf-m-4 { margin: var(--skf-space-4); }
.skf-m-5 { margin: var(--skf-space-5); }
.skf-m-6 { margin: var(--skf-space-6); }
.skf-m-auto { margin: auto; }
.skf-mt-0 { margin-top: 0; }
.skf-mt-1 { margin-top: var(--skf-space-1); }
.skf-mt-2 { margin-top: var(--skf-space-2); }
.skf-mt-3 { margin-top: var(--skf-space-3); }
.skf-mt-4 { margin-top: var(--skf-space-4); }
.skf-mt-5 { margin-top: var(--skf-space-5); }
.skf-mt-6 { margin-top: var(--skf-space-6); }
.skf-mt-auto { margin-top: auto; }
.skf-me-0 { margin-inline-end: 0; }
.skf-me-1 { margin-inline-end: var(--skf-space-1); }
.skf-me-2 { margin-inline-end: var(--skf-space-2); }
.skf-me-3 { margin-inline-end: var(--skf-space-3); }
.skf-me-4 { margin-inline-end: var(--skf-space-4); }
.skf-me-5 { margin-inline-end: var(--skf-space-5); }
.skf-me-6 { margin-inline-end: var(--skf-space-6); }
.skf-me-auto { margin-inline-end: auto; }
.skf-mb-0 { margin-bottom: 0; }
.skf-mb-1 { margin-bottom: var(--skf-space-1); }
.skf-mb-2 { margin-bottom: var(--skf-space-2); }
.skf-mb-3 { margin-bottom: var(--skf-space-3); }
.skf-mb-4 { margin-bottom: var(--skf-space-4); }
.skf-mb-5 { margin-bottom: var(--skf-space-5); }
.skf-mb-6 { margin-bottom: var(--skf-space-6); }
.skf-mb-auto { margin-bottom: auto; }
.skf-ms-0 { margin-inline-start: 0; }
.skf-ms-1 { margin-inline-start: var(--skf-space-1); }
.skf-ms-2 { margin-inline-start: var(--skf-space-2); }
.skf-ms-3 { margin-inline-start: var(--skf-space-3); }
.skf-ms-4 { margin-inline-start: var(--skf-space-4); }
.skf-ms-5 { margin-inline-start: var(--skf-space-5); }
.skf-ms-6 { margin-inline-start: var(--skf-space-6); }
.skf-ms-auto { margin-inline-start: auto; }
.skf-mx-0 { margin-inline: 0; }
.skf-mx-1 { margin-inline: var(--skf-space-1); }
.skf-mx-2 { margin-inline: var(--skf-space-2); }
.skf-mx-3 { margin-inline: var(--skf-space-3); }
.skf-mx-4 { margin-inline: var(--skf-space-4); }
.skf-mx-5 { margin-inline: var(--skf-space-5); }
.skf-mx-6 { margin-inline: var(--skf-space-6); }
.skf-mx-auto { margin-inline: auto; }
.skf-my-0 { margin-block: 0; }
.skf-my-1 { margin-block: var(--skf-space-1); }
.skf-my-2 { margin-block: var(--skf-space-2); }
.skf-my-3 { margin-block: var(--skf-space-3); }
.skf-my-4 { margin-block: var(--skf-space-4); }
.skf-my-5 { margin-block: var(--skf-space-5); }
.skf-my-6 { margin-block: var(--skf-space-6); }
.skf-my-auto { margin-block: auto; }

/* ---- padding ---- */
.skf-p-0 { padding: 0; }
.skf-p-1 { padding: var(--skf-space-1); }
.skf-p-2 { padding: var(--skf-space-2); }
.skf-p-3 { padding: var(--skf-space-3); }
.skf-p-4 { padding: var(--skf-space-4); }
.skf-p-5 { padding: var(--skf-space-5); }
.skf-p-6 { padding: var(--skf-space-6); }
.skf-pt-0 { padding-top: 0; }
.skf-pt-1 { padding-top: var(--skf-space-1); }
.skf-pt-2 { padding-top: var(--skf-space-2); }
.skf-pt-3 { padding-top: var(--skf-space-3); }
.skf-pt-4 { padding-top: var(--skf-space-4); }
.skf-pt-5 { padding-top: var(--skf-space-5); }
.skf-pt-6 { padding-top: var(--skf-space-6); }
.skf-pe-0 { padding-inline-end: 0; }
.skf-pe-1 { padding-inline-end: var(--skf-space-1); }
.skf-pe-2 { padding-inline-end: var(--skf-space-2); }
.skf-pe-3 { padding-inline-end: var(--skf-space-3); }
.skf-pe-4 { padding-inline-end: var(--skf-space-4); }
.skf-pe-5 { padding-inline-end: var(--skf-space-5); }
.skf-pe-6 { padding-inline-end: var(--skf-space-6); }
.skf-pb-0 { padding-bottom: 0; }
.skf-pb-1 { padding-bottom: var(--skf-space-1); }
.skf-pb-2 { padding-bottom: var(--skf-space-2); }
.skf-pb-3 { padding-bottom: var(--skf-space-3); }
.skf-pb-4 { padding-bottom: var(--skf-space-4); }
.skf-pb-5 { padding-bottom: var(--skf-space-5); }
.skf-pb-6 { padding-bottom: var(--skf-space-6); }
.skf-ps-0 { padding-inline-start: 0; }
.skf-ps-1 { padding-inline-start: var(--skf-space-1); }
.skf-ps-2 { padding-inline-start: var(--skf-space-2); }
.skf-ps-3 { padding-inline-start: var(--skf-space-3); }
.skf-ps-4 { padding-inline-start: var(--skf-space-4); }
.skf-ps-5 { padding-inline-start: var(--skf-space-5); }
.skf-ps-6 { padding-inline-start: var(--skf-space-6); }
.skf-px-0 { padding-inline: 0; }
.skf-px-1 { padding-inline: var(--skf-space-1); }
.skf-px-2 { padding-inline: var(--skf-space-2); }
.skf-px-3 { padding-inline: var(--skf-space-3); }
.skf-px-4 { padding-inline: var(--skf-space-4); }
.skf-px-5 { padding-inline: var(--skf-space-5); }
.skf-px-6 { padding-inline: var(--skf-space-6); }
.skf-py-0 { padding-block: 0; }
.skf-py-1 { padding-block: var(--skf-space-1); }
.skf-py-2 { padding-block: var(--skf-space-2); }
.skf-py-3 { padding-block: var(--skf-space-3); }
.skf-py-4 { padding-block: var(--skf-space-4); }
.skf-py-5 { padding-block: var(--skf-space-5); }
.skf-py-6 { padding-block: var(--skf-space-6); }

/* ================= 间距 (Gap) ================= */
.skf-gap-0 { gap: 0; }
.skf-gap-1 { gap: var(--skf-space-1); }
.skf-gap-2 { gap: var(--skf-space-2); }
.skf-gap-3 { gap: var(--skf-space-3); }
.skf-gap-4 { gap: var(--skf-space-4); }
.skf-gap-5 { gap: var(--skf-space-5); }
.skf-gap-6 { gap: var(--skf-space-6); }
.skf-row-gap-0 { row-gap: 0; }
.skf-row-gap-1 { row-gap: var(--skf-space-1); }
.skf-row-gap-2 { row-gap: var(--skf-space-2); }
.skf-row-gap-3 { row-gap: var(--skf-space-3); }
.skf-row-gap-4 { row-gap: var(--skf-space-4); }
.skf-row-gap-5 { row-gap: var(--skf-space-5); }
.skf-row-gap-6 { row-gap: var(--skf-space-6); }
.skf-column-gap-0 { column-gap: 0; }
.skf-column-gap-1 { column-gap: var(--skf-space-1); }
.skf-column-gap-2 { column-gap: var(--skf-space-2); }
.skf-column-gap-3 { column-gap: var(--skf-space-3); }
.skf-column-gap-4 { column-gap: var(--skf-space-4); }
.skf-column-gap-5 { column-gap: var(--skf-space-5); }
.skf-column-gap-6 { column-gap: var(--skf-space-6); }

/* ================= 文本 (Text) ================= */
.skf-text-start { text-align: start; }
.skf-text-center { text-align: center; }
.skf-text-end { text-align: end; }
.skf-text-uppercase { text-transform: uppercase; }
.skf-text-lowercase { text-transform: lowercase; }
.skf-text-capitalize { text-transform: capitalize; }
.skf-text-wrap { white-space: normal; }
.skf-text-nowrap { white-space: nowrap; }
.skf-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skf-text-break {
  overflow-wrap: break-word;
  word-break: break-word;
}
.skf-text-decoration-none { text-decoration: none; }
.skf-text-decoration-underline { text-decoration: underline; }
.skf-text-decoration-line-through { text-decoration: line-through; }
.skf-fw-light { font-weight: 300; }
.skf-fw-normal { font-weight: 400; }
.skf-fw-medium { font-weight: 500; }
.skf-fw-semibold { font-weight: 600; }
.skf-fw-bold { font-weight: 700; }
.skf-fst-normal { font-style: normal; }
.skf-fst-italic { font-style: italic; }
.skf-fs-1 { font-size: 2.25rem; }
.skf-fs-2 { font-size: 1.75rem; }
.skf-fs-3 { font-size: 1.5rem; }
.skf-fs-4 { font-size: 1.25rem; }
.skf-fs-5 { font-size: 1rem; }
.skf-fs-6 { font-size: 0.85rem; }
.skf-lh-1 { line-height: 1; }
.skf-lh-sm { line-height: 1.4; }
.skf-lh-base { line-height: 1.6; }
.skf-lh-lg { line-height: 2; }

/* ================= 颜色 (Colors) ================= */
/* 文字色：均引用令牌，画布退底、色彩点染 */
.skf-text-primary   { color: var(--sh-accent); }
.skf-text-secondary { color: var(--sh-secondary); }
.skf-text-success   { color: var(--sh-success); }
.skf-text-warning   { color: var(--sh-warning); }
.skf-text-danger    { color: var(--sh-danger); }
.skf-text-muted     { color: var(--sh-muted); }
.skf-text-main      { color: var(--sh-fg); }
.skf-text-white     { color: #FFFFFF; }
/* 背景色：大色块用法克制，仅作可选修饰 */
.skf-bg-primary { background-color: var(--sh-accent); color: var(--sh-on-accent); }
.skf-bg-secondary { background-color: var(--sh-secondary); color: #FFFFFF; }
.skf-bg-success { background-color: var(--sh-success); color: #FFFFFF; }
.skf-bg-warning { background-color: var(--sh-warning); color: #FFFFFF; }
.skf-bg-danger { background-color: var(--sh-danger); color: #FFFFFF; }
.skf-bg-surface { background-color: var(--sh-surface); }
.skf-bg-page { background-color: var(--sh-bg); }
.skf-bg-transparent { background-color: transparent; }

/* ================= 尺寸 (Sizing) ================= */
.skf-w-25 { width: 25%; }
.skf-w-50 { width: 50%; }
.skf-w-75 { width: 75%; }
.skf-w-100 { width: 100%; }
.skf-w-auto { width: auto; }
.skf-h-25 { height: 25%; }
.skf-h-50 { height: 50%; }
.skf-h-75 { height: 75%; }
.skf-h-100 { height: 100%; }
.skf-h-auto { height: auto; }
.skf-mw-100 { max-width: 100%; }
.skf-mh-100 { max-height: 100%; }
.skf-vw-100 { width: 100vw; }
.skf-vh-100 { height: 100vh; }
.skf-min-vw-100 { min-width: 100vw; }
.skf-min-vh-100 { min-height: 100vh; }

/* ================= 边框 (Borders) ================= */
.skf-border { border: 1px solid var(--sh-hairline); }
.skf-border-top { border-top: 1px solid var(--sh-hairline); }
.skf-border-end { border-inline-end: 1px solid var(--sh-hairline); }
.skf-border-bottom { border-bottom: 1px solid var(--sh-hairline); }
.skf-border-start { border-inline-start: 1px solid var(--sh-hairline); }
.skf-border-0 { border: 0; }
.skf-border-top-0 { border-top: 0; }
.skf-border-end-0 { border-inline-end: 0; }
.skf-border-bottom-0 { border-bottom: 0; }
.skf-border-start-0 { border-inline-start: 0; }
/* 加宽（直角加粗） */
.skf-border-1 { border-width: 1px; }
.skf-border-2 { border-width: 2px; }
.skf-border-3 { border-width: 3px; }
/* 边框色 */
.skf-border-primary { border-color: var(--sh-accent); }
.skf-border-secondary { border-color: var(--sh-secondary); }
.skf-border-success { border-color: var(--sh-success); }
.skf-border-main { border-color: var(--sh-fg); }

/* ================= 阴影 (Shadows) ================= */
.skf-shadow { box-shadow: var(--sh-shadow); }
.skf-shadow-sm { box-shadow: var(--sh-shadow); }
.skf-shadow-lg { box-shadow: var(--sh-shadow-float); }
.skf-shadow-none { box-shadow: none; }

/* ================= 定位 (Position) ================= */
.skf-position-static { position: static; }
.skf-position-relative { position: relative; }
.skf-position-absolute { position: absolute; }
.skf-position-fixed { position: fixed; }
.skf-position-sticky { position: sticky; }
.skf-top-0 { top: 0; }
.skf-top-50 { top: 50%; }
.skf-top-100 { top: 100%; }
.skf-bottom-0 { bottom: 0; }
.skf-bottom-50 { bottom: 50%; }
.skf-bottom-100 { bottom: 100%; }
.skf-start-0 { inset-inline-start: 0; }
.skf-start-50 { inset-inline-start: 50%; }
.skf-start-100 { inset-inline-start: 100%; }
.skf-end-0 { inset-inline-end: 0; }
.skf-end-50 { inset-inline-end: 50%; }
.skf-end-100 { inset-inline-end: 100%; }
.skf-translate-middle { transform: translate(-50%, -50%); }
.skf-translate-middle-x { transform: translateX(-50%); }
.skf-translate-middle-y { transform: translateY(-50%); }
.skf-z-0 { z-index: 0; }
.skf-z-1 { z-index: 1; }
.skf-z-2 { z-index: 2; }
.skf-z-3 { z-index: 3; }

/* ================= 溢出 (Overflow) ================= */
.skf-overflow-auto { overflow: auto; }
.skf-overflow-hidden { overflow: hidden; }
.skf-overflow-visible { overflow: visible; }
.skf-overflow-scroll { overflow: scroll; }
.skf-overflow-x-auto { overflow-x: auto; }
.skf-overflow-y-auto { overflow-y: auto; }
.skf-overflow-x-hidden { overflow-x: hidden; }
.skf-overflow-y-hidden { overflow-y: hidden; }

/* ================= 透明度 / 浮层 / 其他 ================= */
.skf-opacity-0 { opacity: 0; }
.skf-opacity-25 { opacity: 0.25; }
.skf-opacity-50 { opacity: 0.5; }
.skf-opacity-75 { opacity: 0.75; }
.skf-opacity-100 { opacity: 1; }
.skf-float-start { float: inline-start; }
.skf-float-end { float: inline-end; }
.skf-float-none { float: none; }
.skf-align-baseline { vertical-align: baseline; }
.skf-align-top { vertical-align: top; }
.skf-align-middle { vertical-align: middle; }
.skf-align-bottom { vertical-align: bottom; }
.skf-align-text-top { vertical-align: text-top; }
.skf-align-text-bottom { vertical-align: text-bottom; }
.skf-user-select-all { user-select: all; }
.skf-user-select-auto { user-select: auto; }
.skf-user-select-none { user-select: none; }
.skf-pe-none { pointer-events: none; }
.skf-pe-auto { pointer-events: auto; }
/* 无障碍：视觉隐藏但保留在辅助技术中 */
.skf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skf-visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 撑满父容器：配合 position-relative 使用 */
.skf-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ================= 比例盒 (Ratio) ================= */
.skf-ratio {
  position: relative;
  width: 100%;
}
.skf-ratio::before {
  content: "";
  display: block;
}
.skf-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.skf-ratio-1x1::before { padding-top: 100%; }
.skf-ratio-4x3::before { padding-top: 75%; }
.skf-ratio-16x9::before { padding-top: 56.25%; }
.skf-ratio-21x9::before { padding-top: 42.857143%; }

/* ================= 断点变体 (Responsive) ================= */

/* ---- sm ≥ 576px ---- */
@media (min-width: 576px) {
  .skf-d-sm-none { display: none; }
  .skf-d-sm-inline { display: inline; }
  .skf-d-sm-inline-block { display: inline-block; }
  .skf-d-sm-block { display: block; }
  .skf-d-sm-grid { display: grid; }
  .skf-d-sm-inline-grid { display: inline-grid; }
  .skf-d-sm-flex { display: flex; }
  .skf-d-sm-inline-flex { display: inline-flex; }
  .skf-d-sm-table { display: table; }
  .skf-d-sm-table-cell { display: table-cell; }
  .skf-d-sm-table-row { display: table-row; }
  .skf-flex-sm-row { flex-direction: row; }
  .skf-flex-sm-row-reverse { flex-direction: row-reverse; }
  .skf-flex-sm-column { flex-direction: column; }
  .skf-flex-sm-column-reverse { flex-direction: column-reverse; }
  .skf-flex-sm-wrap { flex-wrap: wrap; }
  .skf-flex-sm-nowrap { flex-wrap: nowrap; }
  .skf-flex-sm-wrap-reverse { flex-wrap: wrap-reverse; }
  .skf-flex-sm-fill { flex: 1 1 auto; }
  .skf-flex-sm-grow-0 { flex-grow: 0; }
  .skf-flex-sm-grow-1 { flex-grow: 1; }
  .skf-flex-sm-shrink-0 { flex-shrink: 0; }
  .skf-flex-sm-shrink-1 { flex-shrink: 1; }
  .skf-justify-content-sm-start { justify-content: flex-start; }
  .skf-justify-content-sm-end { justify-content: flex-end; }
  .skf-justify-content-sm-center { justify-content: center; }
  .skf-justify-content-sm-between { justify-content: space-between; }
  .skf-justify-content-sm-around { justify-content: space-around; }
  .skf-justify-content-sm-evenly { justify-content: space-evenly; }
  .skf-align-items-sm-start { align-items: flex-start; }
  .skf-align-items-sm-end { align-items: flex-end; }
  .skf-align-items-sm-center { align-items: center; }
  .skf-align-items-sm-baseline { align-items: baseline; }
  .skf-align-items-sm-stretch { align-items: stretch; }
  .skf-align-content-sm-start { align-content: flex-start; }
  .skf-align-content-sm-end { align-content: flex-end; }
  .skf-align-content-sm-center { align-content: center; }
  .skf-align-content-sm-between { align-content: space-between; }
  .skf-align-content-sm-around { align-content: space-around; }
  .skf-align-content-sm-stretch { align-content: stretch; }
  .skf-align-self-sm-auto { align-self: auto; }
  .skf-align-self-sm-start { align-self: flex-start; }
  .skf-align-self-sm-end { align-self: flex-end; }
  .skf-align-self-sm-center { align-self: center; }
  .skf-align-self-sm-baseline { align-self: baseline; }
  .skf-align-self-sm-stretch { align-self: stretch; }
  .skf-order-sm-first { order: -1; }
  .skf-order-sm-last { order: 6; }
  .skf-m-sm-0 { margin: 0; }
  .skf-m-sm-1 { margin: var(--skf-space-1); }
  .skf-m-sm-2 { margin: var(--skf-space-2); }
  .skf-m-sm-3 { margin: var(--skf-space-3); }
  .skf-m-sm-4 { margin: var(--skf-space-4); }
  .skf-m-sm-5 { margin: var(--skf-space-5); }
  .skf-m-sm-6 { margin: var(--skf-space-6); }
  .skf-m-sm-auto { margin: auto; }
  .skf-mt-sm-0 { margin-top: 0; }
  .skf-mt-sm-1 { margin-top: var(--skf-space-1); }
  .skf-mt-sm-2 { margin-top: var(--skf-space-2); }
  .skf-mt-sm-3 { margin-top: var(--skf-space-3); }
  .skf-mt-sm-4 { margin-top: var(--skf-space-4); }
  .skf-mt-sm-5 { margin-top: var(--skf-space-5); }
  .skf-mt-sm-6 { margin-top: var(--skf-space-6); }
  .skf-mt-sm-auto { margin-top: auto; }
  .skf-me-sm-0 { margin-inline-end: 0; }
  .skf-me-sm-1 { margin-inline-end: var(--skf-space-1); }
  .skf-me-sm-2 { margin-inline-end: var(--skf-space-2); }
  .skf-me-sm-3 { margin-inline-end: var(--skf-space-3); }
  .skf-me-sm-4 { margin-inline-end: var(--skf-space-4); }
  .skf-me-sm-5 { margin-inline-end: var(--skf-space-5); }
  .skf-me-sm-6 { margin-inline-end: var(--skf-space-6); }
  .skf-me-sm-auto { margin-inline-end: auto; }
  .skf-mb-sm-0 { margin-bottom: 0; }
  .skf-mb-sm-1 { margin-bottom: var(--skf-space-1); }
  .skf-mb-sm-2 { margin-bottom: var(--skf-space-2); }
  .skf-mb-sm-3 { margin-bottom: var(--skf-space-3); }
  .skf-mb-sm-4 { margin-bottom: var(--skf-space-4); }
  .skf-mb-sm-5 { margin-bottom: var(--skf-space-5); }
  .skf-mb-sm-6 { margin-bottom: var(--skf-space-6); }
  .skf-mb-sm-auto { margin-bottom: auto; }
  .skf-ms-sm-0 { margin-inline-start: 0; }
  .skf-ms-sm-1 { margin-inline-start: var(--skf-space-1); }
  .skf-ms-sm-2 { margin-inline-start: var(--skf-space-2); }
  .skf-ms-sm-3 { margin-inline-start: var(--skf-space-3); }
  .skf-ms-sm-4 { margin-inline-start: var(--skf-space-4); }
  .skf-ms-sm-5 { margin-inline-start: var(--skf-space-5); }
  .skf-ms-sm-6 { margin-inline-start: var(--skf-space-6); }
  .skf-ms-sm-auto { margin-inline-start: auto; }
  .skf-mx-sm-0 { margin-inline: 0; }
  .skf-mx-sm-1 { margin-inline: var(--skf-space-1); }
  .skf-mx-sm-2 { margin-inline: var(--skf-space-2); }
  .skf-mx-sm-3 { margin-inline: var(--skf-space-3); }
  .skf-mx-sm-4 { margin-inline: var(--skf-space-4); }
  .skf-mx-sm-5 { margin-inline: var(--skf-space-5); }
  .skf-mx-sm-6 { margin-inline: var(--skf-space-6); }
  .skf-mx-sm-auto { margin-inline: auto; }
  .skf-my-sm-0 { margin-block: 0; }
  .skf-my-sm-1 { margin-block: var(--skf-space-1); }
  .skf-my-sm-2 { margin-block: var(--skf-space-2); }
  .skf-my-sm-3 { margin-block: var(--skf-space-3); }
  .skf-my-sm-4 { margin-block: var(--skf-space-4); }
  .skf-my-sm-5 { margin-block: var(--skf-space-5); }
  .skf-my-sm-6 { margin-block: var(--skf-space-6); }
  .skf-my-sm-auto { margin-block: auto; }
  .skf-p-sm-0 { padding: 0; }
  .skf-p-sm-1 { padding: var(--skf-space-1); }
  .skf-p-sm-2 { padding: var(--skf-space-2); }
  .skf-p-sm-3 { padding: var(--skf-space-3); }
  .skf-p-sm-4 { padding: var(--skf-space-4); }
  .skf-p-sm-5 { padding: var(--skf-space-5); }
  .skf-p-sm-6 { padding: var(--skf-space-6); }
  .skf-pt-sm-0 { padding-top: 0; }
  .skf-pt-sm-1 { padding-top: var(--skf-space-1); }
  .skf-pt-sm-2 { padding-top: var(--skf-space-2); }
  .skf-pt-sm-3 { padding-top: var(--skf-space-3); }
  .skf-pt-sm-4 { padding-top: var(--skf-space-4); }
  .skf-pt-sm-5 { padding-top: var(--skf-space-5); }
  .skf-pt-sm-6 { padding-top: var(--skf-space-6); }
  .skf-pe-sm-0 { padding-inline-end: 0; }
  .skf-pe-sm-1 { padding-inline-end: var(--skf-space-1); }
  .skf-pe-sm-2 { padding-inline-end: var(--skf-space-2); }
  .skf-pe-sm-3 { padding-inline-end: var(--skf-space-3); }
  .skf-pe-sm-4 { padding-inline-end: var(--skf-space-4); }
  .skf-pe-sm-5 { padding-inline-end: var(--skf-space-5); }
  .skf-pe-sm-6 { padding-inline-end: var(--skf-space-6); }
  .skf-pb-sm-0 { padding-bottom: 0; }
  .skf-pb-sm-1 { padding-bottom: var(--skf-space-1); }
  .skf-pb-sm-2 { padding-bottom: var(--skf-space-2); }
  .skf-pb-sm-3 { padding-bottom: var(--skf-space-3); }
  .skf-pb-sm-4 { padding-bottom: var(--skf-space-4); }
  .skf-pb-sm-5 { padding-bottom: var(--skf-space-5); }
  .skf-pb-sm-6 { padding-bottom: var(--skf-space-6); }
  .skf-ps-sm-0 { padding-inline-start: 0; }
  .skf-ps-sm-1 { padding-inline-start: var(--skf-space-1); }
  .skf-ps-sm-2 { padding-inline-start: var(--skf-space-2); }
  .skf-ps-sm-3 { padding-inline-start: var(--skf-space-3); }
  .skf-ps-sm-4 { padding-inline-start: var(--skf-space-4); }
  .skf-ps-sm-5 { padding-inline-start: var(--skf-space-5); }
  .skf-ps-sm-6 { padding-inline-start: var(--skf-space-6); }
  .skf-px-sm-0 { padding-inline: 0; }
  .skf-px-sm-1 { padding-inline: var(--skf-space-1); }
  .skf-px-sm-2 { padding-inline: var(--skf-space-2); }
  .skf-px-sm-3 { padding-inline: var(--skf-space-3); }
  .skf-px-sm-4 { padding-inline: var(--skf-space-4); }
  .skf-px-sm-5 { padding-inline: var(--skf-space-5); }
  .skf-px-sm-6 { padding-inline: var(--skf-space-6); }
  .skf-py-sm-0 { padding-block: 0; }
  .skf-py-sm-1 { padding-block: var(--skf-space-1); }
  .skf-py-sm-2 { padding-block: var(--skf-space-2); }
  .skf-py-sm-3 { padding-block: var(--skf-space-3); }
  .skf-py-sm-4 { padding-block: var(--skf-space-4); }
  .skf-py-sm-5 { padding-block: var(--skf-space-5); }
  .skf-py-sm-6 { padding-block: var(--skf-space-6); }
  .skf-text-sm-start { text-align: start; }
  .skf-text-sm-center { text-align: center; }
  .skf-text-sm-end { text-align: end; }
  .skf-float-sm-start { float: inline-start; }
  .skf-float-sm-end { float: inline-end; }
  .skf-float-sm-none { float: none; }
}

/* ---- md ≥ 768px ---- */
@media (min-width: 768px) {
  .skf-d-md-none { display: none; }
  .skf-d-md-inline { display: inline; }
  .skf-d-md-inline-block { display: inline-block; }
  .skf-d-md-block { display: block; }
  .skf-d-md-grid { display: grid; }
  .skf-d-md-inline-grid { display: inline-grid; }
  .skf-d-md-flex { display: flex; }
  .skf-d-md-inline-flex { display: inline-flex; }
  .skf-d-md-table { display: table; }
  .skf-d-md-table-cell { display: table-cell; }
  .skf-d-md-table-row { display: table-row; }
  .skf-flex-md-row { flex-direction: row; }
  .skf-flex-md-row-reverse { flex-direction: row-reverse; }
  .skf-flex-md-column { flex-direction: column; }
  .skf-flex-md-column-reverse { flex-direction: column-reverse; }
  .skf-flex-md-wrap { flex-wrap: wrap; }
  .skf-flex-md-nowrap { flex-wrap: nowrap; }
  .skf-flex-md-wrap-reverse { flex-wrap: wrap-reverse; }
  .skf-flex-md-fill { flex: 1 1 auto; }
  .skf-flex-md-grow-0 { flex-grow: 0; }
  .skf-flex-md-grow-1 { flex-grow: 1; }
  .skf-flex-md-shrink-0 { flex-shrink: 0; }
  .skf-flex-md-shrink-1 { flex-shrink: 1; }
  .skf-justify-content-md-start { justify-content: flex-start; }
  .skf-justify-content-md-end { justify-content: flex-end; }
  .skf-justify-content-md-center { justify-content: center; }
  .skf-justify-content-md-between { justify-content: space-between; }
  .skf-justify-content-md-around { justify-content: space-around; }
  .skf-justify-content-md-evenly { justify-content: space-evenly; }
  .skf-align-items-md-start { align-items: flex-start; }
  .skf-align-items-md-end { align-items: flex-end; }
  .skf-align-items-md-center { align-items: center; }
  .skf-align-items-md-baseline { align-items: baseline; }
  .skf-align-items-md-stretch { align-items: stretch; }
  .skf-align-content-md-start { align-content: flex-start; }
  .skf-align-content-md-end { align-content: flex-end; }
  .skf-align-content-md-center { align-content: center; }
  .skf-align-content-md-between { align-content: space-between; }
  .skf-align-content-md-around { align-content: space-around; }
  .skf-align-content-md-stretch { align-content: stretch; }
  .skf-align-self-md-auto { align-self: auto; }
  .skf-align-self-md-start { align-self: flex-start; }
  .skf-align-self-md-end { align-self: flex-end; }
  .skf-align-self-md-center { align-self: center; }
  .skf-align-self-md-baseline { align-self: baseline; }
  .skf-align-self-md-stretch { align-self: stretch; }
  .skf-order-md-first { order: -1; }
  .skf-order-md-last { order: 6; }
  .skf-m-md-0 { margin: 0; }
  .skf-m-md-1 { margin: var(--skf-space-1); }
  .skf-m-md-2 { margin: var(--skf-space-2); }
  .skf-m-md-3 { margin: var(--skf-space-3); }
  .skf-m-md-4 { margin: var(--skf-space-4); }
  .skf-m-md-5 { margin: var(--skf-space-5); }
  .skf-m-md-6 { margin: var(--skf-space-6); }
  .skf-m-md-auto { margin: auto; }
  .skf-mt-md-0 { margin-top: 0; }
  .skf-mt-md-1 { margin-top: var(--skf-space-1); }
  .skf-mt-md-2 { margin-top: var(--skf-space-2); }
  .skf-mt-md-3 { margin-top: var(--skf-space-3); }
  .skf-mt-md-4 { margin-top: var(--skf-space-4); }
  .skf-mt-md-5 { margin-top: var(--skf-space-5); }
  .skf-mt-md-6 { margin-top: var(--skf-space-6); }
  .skf-mt-md-auto { margin-top: auto; }
  .skf-me-md-0 { margin-inline-end: 0; }
  .skf-me-md-1 { margin-inline-end: var(--skf-space-1); }
  .skf-me-md-2 { margin-inline-end: var(--skf-space-2); }
  .skf-me-md-3 { margin-inline-end: var(--skf-space-3); }
  .skf-me-md-4 { margin-inline-end: var(--skf-space-4); }
  .skf-me-md-5 { margin-inline-end: var(--skf-space-5); }
  .skf-me-md-6 { margin-inline-end: var(--skf-space-6); }
  .skf-me-md-auto { margin-inline-end: auto; }
  .skf-mb-md-0 { margin-bottom: 0; }
  .skf-mb-md-1 { margin-bottom: var(--skf-space-1); }
  .skf-mb-md-2 { margin-bottom: var(--skf-space-2); }
  .skf-mb-md-3 { margin-bottom: var(--skf-space-3); }
  .skf-mb-md-4 { margin-bottom: var(--skf-space-4); }
  .skf-mb-md-5 { margin-bottom: var(--skf-space-5); }
  .skf-mb-md-6 { margin-bottom: var(--skf-space-6); }
  .skf-mb-md-auto { margin-bottom: auto; }
  .skf-ms-md-0 { margin-inline-start: 0; }
  .skf-ms-md-1 { margin-inline-start: var(--skf-space-1); }
  .skf-ms-md-2 { margin-inline-start: var(--skf-space-2); }
  .skf-ms-md-3 { margin-inline-start: var(--skf-space-3); }
  .skf-ms-md-4 { margin-inline-start: var(--skf-space-4); }
  .skf-ms-md-5 { margin-inline-start: var(--skf-space-5); }
  .skf-ms-md-6 { margin-inline-start: var(--skf-space-6); }
  .skf-ms-md-auto { margin-inline-start: auto; }
  .skf-mx-md-0 { margin-inline: 0; }
  .skf-mx-md-1 { margin-inline: var(--skf-space-1); }
  .skf-mx-md-2 { margin-inline: var(--skf-space-2); }
  .skf-mx-md-3 { margin-inline: var(--skf-space-3); }
  .skf-mx-md-4 { margin-inline: var(--skf-space-4); }
  .skf-mx-md-5 { margin-inline: var(--skf-space-5); }
  .skf-mx-md-6 { margin-inline: var(--skf-space-6); }
  .skf-mx-md-auto { margin-inline: auto; }
  .skf-my-md-0 { margin-block: 0; }
  .skf-my-md-1 { margin-block: var(--skf-space-1); }
  .skf-my-md-2 { margin-block: var(--skf-space-2); }
  .skf-my-md-3 { margin-block: var(--skf-space-3); }
  .skf-my-md-4 { margin-block: var(--skf-space-4); }
  .skf-my-md-5 { margin-block: var(--skf-space-5); }
  .skf-my-md-6 { margin-block: var(--skf-space-6); }
  .skf-my-md-auto { margin-block: auto; }
  .skf-p-md-0 { padding: 0; }
  .skf-p-md-1 { padding: var(--skf-space-1); }
  .skf-p-md-2 { padding: var(--skf-space-2); }
  .skf-p-md-3 { padding: var(--skf-space-3); }
  .skf-p-md-4 { padding: var(--skf-space-4); }
  .skf-p-md-5 { padding: var(--skf-space-5); }
  .skf-p-md-6 { padding: var(--skf-space-6); }
  .skf-pt-md-0 { padding-top: 0; }
  .skf-pt-md-1 { padding-top: var(--skf-space-1); }
  .skf-pt-md-2 { padding-top: var(--skf-space-2); }
  .skf-pt-md-3 { padding-top: var(--skf-space-3); }
  .skf-pt-md-4 { padding-top: var(--skf-space-4); }
  .skf-pt-md-5 { padding-top: var(--skf-space-5); }
  .skf-pt-md-6 { padding-top: var(--skf-space-6); }
  .skf-pe-md-0 { padding-inline-end: 0; }
  .skf-pe-md-1 { padding-inline-end: var(--skf-space-1); }
  .skf-pe-md-2 { padding-inline-end: var(--skf-space-2); }
  .skf-pe-md-3 { padding-inline-end: var(--skf-space-3); }
  .skf-pe-md-4 { padding-inline-end: var(--skf-space-4); }
  .skf-pe-md-5 { padding-inline-end: var(--skf-space-5); }
  .skf-pe-md-6 { padding-inline-end: var(--skf-space-6); }
  .skf-pb-md-0 { padding-bottom: 0; }
  .skf-pb-md-1 { padding-bottom: var(--skf-space-1); }
  .skf-pb-md-2 { padding-bottom: var(--skf-space-2); }
  .skf-pb-md-3 { padding-bottom: var(--skf-space-3); }
  .skf-pb-md-4 { padding-bottom: var(--skf-space-4); }
  .skf-pb-md-5 { padding-bottom: var(--skf-space-5); }
  .skf-pb-md-6 { padding-bottom: var(--skf-space-6); }
  .skf-ps-md-0 { padding-inline-start: 0; }
  .skf-ps-md-1 { padding-inline-start: var(--skf-space-1); }
  .skf-ps-md-2 { padding-inline-start: var(--skf-space-2); }
  .skf-ps-md-3 { padding-inline-start: var(--skf-space-3); }
  .skf-ps-md-4 { padding-inline-start: var(--skf-space-4); }
  .skf-ps-md-5 { padding-inline-start: var(--skf-space-5); }
  .skf-ps-md-6 { padding-inline-start: var(--skf-space-6); }
  .skf-px-md-0 { padding-inline: 0; }
  .skf-px-md-1 { padding-inline: var(--skf-space-1); }
  .skf-px-md-2 { padding-inline: var(--skf-space-2); }
  .skf-px-md-3 { padding-inline: var(--skf-space-3); }
  .skf-px-md-4 { padding-inline: var(--skf-space-4); }
  .skf-px-md-5 { padding-inline: var(--skf-space-5); }
  .skf-px-md-6 { padding-inline: var(--skf-space-6); }
  .skf-py-md-0 { padding-block: 0; }
  .skf-py-md-1 { padding-block: var(--skf-space-1); }
  .skf-py-md-2 { padding-block: var(--skf-space-2); }
  .skf-py-md-3 { padding-block: var(--skf-space-3); }
  .skf-py-md-4 { padding-block: var(--skf-space-4); }
  .skf-py-md-5 { padding-block: var(--skf-space-5); }
  .skf-py-md-6 { padding-block: var(--skf-space-6); }
  .skf-text-md-start { text-align: start; }
  .skf-text-md-center { text-align: center; }
  .skf-text-md-end { text-align: end; }
  .skf-float-md-start { float: inline-start; }
  .skf-float-md-end { float: inline-end; }
  .skf-float-md-none { float: none; }
}

/* ---- lg ≥ 992px ---- */
@media (min-width: 992px) {
  .skf-d-lg-none { display: none; }
  .skf-d-lg-inline { display: inline; }
  .skf-d-lg-inline-block { display: inline-block; }
  .skf-d-lg-block { display: block; }
  .skf-d-lg-grid { display: grid; }
  .skf-d-lg-inline-grid { display: inline-grid; }
  .skf-d-lg-flex { display: flex; }
  .skf-d-lg-inline-flex { display: inline-flex; }
  .skf-d-lg-table { display: table; }
  .skf-d-lg-table-cell { display: table-cell; }
  .skf-d-lg-table-row { display: table-row; }
  .skf-flex-lg-row { flex-direction: row; }
  .skf-flex-lg-row-reverse { flex-direction: row-reverse; }
  .skf-flex-lg-column { flex-direction: column; }
  .skf-flex-lg-column-reverse { flex-direction: column-reverse; }
  .skf-flex-lg-wrap { flex-wrap: wrap; }
  .skf-flex-lg-nowrap { flex-wrap: nowrap; }
  .skf-flex-lg-wrap-reverse { flex-wrap: wrap-reverse; }
  .skf-flex-lg-fill { flex: 1 1 auto; }
  .skf-flex-lg-grow-0 { flex-grow: 0; }
  .skf-flex-lg-grow-1 { flex-grow: 1; }
  .skf-flex-lg-shrink-0 { flex-shrink: 0; }
  .skf-flex-lg-shrink-1 { flex-shrink: 1; }
  .skf-justify-content-lg-start { justify-content: flex-start; }
  .skf-justify-content-lg-end { justify-content: flex-end; }
  .skf-justify-content-lg-center { justify-content: center; }
  .skf-justify-content-lg-between { justify-content: space-between; }
  .skf-justify-content-lg-around { justify-content: space-around; }
  .skf-justify-content-lg-evenly { justify-content: space-evenly; }
  .skf-align-items-lg-start { align-items: flex-start; }
  .skf-align-items-lg-end { align-items: flex-end; }
  .skf-align-items-lg-center { align-items: center; }
  .skf-align-items-lg-baseline { align-items: baseline; }
  .skf-align-items-lg-stretch { align-items: stretch; }
  .skf-align-content-lg-start { align-content: flex-start; }
  .skf-align-content-lg-end { align-content: flex-end; }
  .skf-align-content-lg-center { align-content: center; }
  .skf-align-content-lg-between { align-content: space-between; }
  .skf-align-content-lg-around { align-content: space-around; }
  .skf-align-content-lg-stretch { align-content: stretch; }
  .skf-align-self-lg-auto { align-self: auto; }
  .skf-align-self-lg-start { align-self: flex-start; }
  .skf-align-self-lg-end { align-self: flex-end; }
  .skf-align-self-lg-center { align-self: center; }
  .skf-align-self-lg-baseline { align-self: baseline; }
  .skf-align-self-lg-stretch { align-self: stretch; }
  .skf-order-lg-first { order: -1; }
  .skf-order-lg-last { order: 6; }
  .skf-m-lg-0 { margin: 0; }
  .skf-m-lg-1 { margin: var(--skf-space-1); }
  .skf-m-lg-2 { margin: var(--skf-space-2); }
  .skf-m-lg-3 { margin: var(--skf-space-3); }
  .skf-m-lg-4 { margin: var(--skf-space-4); }
  .skf-m-lg-5 { margin: var(--skf-space-5); }
  .skf-m-lg-6 { margin: var(--skf-space-6); }
  .skf-m-lg-auto { margin: auto; }
  .skf-mt-lg-0 { margin-top: 0; }
  .skf-mt-lg-1 { margin-top: var(--skf-space-1); }
  .skf-mt-lg-2 { margin-top: var(--skf-space-2); }
  .skf-mt-lg-3 { margin-top: var(--skf-space-3); }
  .skf-mt-lg-4 { margin-top: var(--skf-space-4); }
  .skf-mt-lg-5 { margin-top: var(--skf-space-5); }
  .skf-mt-lg-6 { margin-top: var(--skf-space-6); }
  .skf-mt-lg-auto { margin-top: auto; }
  .skf-me-lg-0 { margin-inline-end: 0; }
  .skf-me-lg-1 { margin-inline-end: var(--skf-space-1); }
  .skf-me-lg-2 { margin-inline-end: var(--skf-space-2); }
  .skf-me-lg-3 { margin-inline-end: var(--skf-space-3); }
  .skf-me-lg-4 { margin-inline-end: var(--skf-space-4); }
  .skf-me-lg-5 { margin-inline-end: var(--skf-space-5); }
  .skf-me-lg-6 { margin-inline-end: var(--skf-space-6); }
  .skf-me-lg-auto { margin-inline-end: auto; }
  .skf-mb-lg-0 { margin-bottom: 0; }
  .skf-mb-lg-1 { margin-bottom: var(--skf-space-1); }
  .skf-mb-lg-2 { margin-bottom: var(--skf-space-2); }
  .skf-mb-lg-3 { margin-bottom: var(--skf-space-3); }
  .skf-mb-lg-4 { margin-bottom: var(--skf-space-4); }
  .skf-mb-lg-5 { margin-bottom: var(--skf-space-5); }
  .skf-mb-lg-6 { margin-bottom: var(--skf-space-6); }
  .skf-mb-lg-auto { margin-bottom: auto; }
  .skf-ms-lg-0 { margin-inline-start: 0; }
  .skf-ms-lg-1 { margin-inline-start: var(--skf-space-1); }
  .skf-ms-lg-2 { margin-inline-start: var(--skf-space-2); }
  .skf-ms-lg-3 { margin-inline-start: var(--skf-space-3); }
  .skf-ms-lg-4 { margin-inline-start: var(--skf-space-4); }
  .skf-ms-lg-5 { margin-inline-start: var(--skf-space-5); }
  .skf-ms-lg-6 { margin-inline-start: var(--skf-space-6); }
  .skf-ms-lg-auto { margin-inline-start: auto; }
  .skf-mx-lg-0 { margin-inline: 0; }
  .skf-mx-lg-1 { margin-inline: var(--skf-space-1); }
  .skf-mx-lg-2 { margin-inline: var(--skf-space-2); }
  .skf-mx-lg-3 { margin-inline: var(--skf-space-3); }
  .skf-mx-lg-4 { margin-inline: var(--skf-space-4); }
  .skf-mx-lg-5 { margin-inline: var(--skf-space-5); }
  .skf-mx-lg-6 { margin-inline: var(--skf-space-6); }
  .skf-mx-lg-auto { margin-inline: auto; }
  .skf-my-lg-0 { margin-block: 0; }
  .skf-my-lg-1 { margin-block: var(--skf-space-1); }
  .skf-my-lg-2 { margin-block: var(--skf-space-2); }
  .skf-my-lg-3 { margin-block: var(--skf-space-3); }
  .skf-my-lg-4 { margin-block: var(--skf-space-4); }
  .skf-my-lg-5 { margin-block: var(--skf-space-5); }
  .skf-my-lg-6 { margin-block: var(--skf-space-6); }
  .skf-my-lg-auto { margin-block: auto; }
  .skf-p-lg-0 { padding: 0; }
  .skf-p-lg-1 { padding: var(--skf-space-1); }
  .skf-p-lg-2 { padding: var(--skf-space-2); }
  .skf-p-lg-3 { padding: var(--skf-space-3); }
  .skf-p-lg-4 { padding: var(--skf-space-4); }
  .skf-p-lg-5 { padding: var(--skf-space-5); }
  .skf-p-lg-6 { padding: var(--skf-space-6); }
  .skf-pt-lg-0 { padding-top: 0; }
  .skf-pt-lg-1 { padding-top: var(--skf-space-1); }
  .skf-pt-lg-2 { padding-top: var(--skf-space-2); }
  .skf-pt-lg-3 { padding-top: var(--skf-space-3); }
  .skf-pt-lg-4 { padding-top: var(--skf-space-4); }
  .skf-pt-lg-5 { padding-top: var(--skf-space-5); }
  .skf-pt-lg-6 { padding-top: var(--skf-space-6); }
  .skf-pe-lg-0 { padding-inline-end: 0; }
  .skf-pe-lg-1 { padding-inline-end: var(--skf-space-1); }
  .skf-pe-lg-2 { padding-inline-end: var(--skf-space-2); }
  .skf-pe-lg-3 { padding-inline-end: var(--skf-space-3); }
  .skf-pe-lg-4 { padding-inline-end: var(--skf-space-4); }
  .skf-pe-lg-5 { padding-inline-end: var(--skf-space-5); }
  .skf-pe-lg-6 { padding-inline-end: var(--skf-space-6); }
  .skf-pb-lg-0 { padding-bottom: 0; }
  .skf-pb-lg-1 { padding-bottom: var(--skf-space-1); }
  .skf-pb-lg-2 { padding-bottom: var(--skf-space-2); }
  .skf-pb-lg-3 { padding-bottom: var(--skf-space-3); }
  .skf-pb-lg-4 { padding-bottom: var(--skf-space-4); }
  .skf-pb-lg-5 { padding-bottom: var(--skf-space-5); }
  .skf-pb-lg-6 { padding-bottom: var(--skf-space-6); }
  .skf-ps-lg-0 { padding-inline-start: 0; }
  .skf-ps-lg-1 { padding-inline-start: var(--skf-space-1); }
  .skf-ps-lg-2 { padding-inline-start: var(--skf-space-2); }
  .skf-ps-lg-3 { padding-inline-start: var(--skf-space-3); }
  .skf-ps-lg-4 { padding-inline-start: var(--skf-space-4); }
  .skf-ps-lg-5 { padding-inline-start: var(--skf-space-5); }
  .skf-ps-lg-6 { padding-inline-start: var(--skf-space-6); }
  .skf-px-lg-0 { padding-inline: 0; }
  .skf-px-lg-1 { padding-inline: var(--skf-space-1); }
  .skf-px-lg-2 { padding-inline: var(--skf-space-2); }
  .skf-px-lg-3 { padding-inline: var(--skf-space-3); }
  .skf-px-lg-4 { padding-inline: var(--skf-space-4); }
  .skf-px-lg-5 { padding-inline: var(--skf-space-5); }
  .skf-px-lg-6 { padding-inline: var(--skf-space-6); }
  .skf-py-lg-0 { padding-block: 0; }
  .skf-py-lg-1 { padding-block: var(--skf-space-1); }
  .skf-py-lg-2 { padding-block: var(--skf-space-2); }
  .skf-py-lg-3 { padding-block: var(--skf-space-3); }
  .skf-py-lg-4 { padding-block: var(--skf-space-4); }
  .skf-py-lg-5 { padding-block: var(--skf-space-5); }
  .skf-py-lg-6 { padding-block: var(--skf-space-6); }
  .skf-text-lg-start { text-align: start; }
  .skf-text-lg-center { text-align: center; }
  .skf-text-lg-end { text-align: end; }
  .skf-float-lg-start { float: inline-start; }
  .skf-float-lg-end { float: inline-end; }
  .skf-float-lg-none { float: none; }
}

/* ---- xl ≥ 1200px ---- */
@media (min-width: 1200px) {
  .skf-d-xl-none { display: none; }
  .skf-d-xl-inline { display: inline; }
  .skf-d-xl-inline-block { display: inline-block; }
  .skf-d-xl-block { display: block; }
  .skf-d-xl-grid { display: grid; }
  .skf-d-xl-inline-grid { display: inline-grid; }
  .skf-d-xl-flex { display: flex; }
  .skf-d-xl-inline-flex { display: inline-flex; }
  .skf-d-xl-table { display: table; }
  .skf-d-xl-table-cell { display: table-cell; }
  .skf-d-xl-table-row { display: table-row; }
  .skf-flex-xl-row { flex-direction: row; }
  .skf-flex-xl-row-reverse { flex-direction: row-reverse; }
  .skf-flex-xl-column { flex-direction: column; }
  .skf-flex-xl-column-reverse { flex-direction: column-reverse; }
  .skf-flex-xl-wrap { flex-wrap: wrap; }
  .skf-flex-xl-nowrap { flex-wrap: nowrap; }
  .skf-flex-xl-wrap-reverse { flex-wrap: wrap-reverse; }
  .skf-flex-xl-fill { flex: 1 1 auto; }
  .skf-flex-xl-grow-0 { flex-grow: 0; }
  .skf-flex-xl-grow-1 { flex-grow: 1; }
  .skf-flex-xl-shrink-0 { flex-shrink: 0; }
  .skf-flex-xl-shrink-1 { flex-shrink: 1; }
  .skf-justify-content-xl-start { justify-content: flex-start; }
  .skf-justify-content-xl-end { justify-content: flex-end; }
  .skf-justify-content-xl-center { justify-content: center; }
  .skf-justify-content-xl-between { justify-content: space-between; }
  .skf-justify-content-xl-around { justify-content: space-around; }
  .skf-justify-content-xl-evenly { justify-content: space-evenly; }
  .skf-align-items-xl-start { align-items: flex-start; }
  .skf-align-items-xl-end { align-items: flex-end; }
  .skf-align-items-xl-center { align-items: center; }
  .skf-align-items-xl-baseline { align-items: baseline; }
  .skf-align-items-xl-stretch { align-items: stretch; }
  .skf-align-content-xl-start { align-content: flex-start; }
  .skf-align-content-xl-end { align-content: flex-end; }
  .skf-align-content-xl-center { align-content: center; }
  .skf-align-content-xl-between { align-content: space-between; }
  .skf-align-content-xl-around { align-content: space-around; }
  .skf-align-content-xl-stretch { align-content: stretch; }
  .skf-align-self-xl-auto { align-self: auto; }
  .skf-align-self-xl-start { align-self: flex-start; }
  .skf-align-self-xl-end { align-self: flex-end; }
  .skf-align-self-xl-center { align-self: center; }
  .skf-align-self-xl-baseline { align-self: baseline; }
  .skf-align-self-xl-stretch { align-self: stretch; }
  .skf-order-xl-first { order: -1; }
  .skf-order-xl-last { order: 6; }
  .skf-m-xl-0 { margin: 0; }
  .skf-m-xl-1 { margin: var(--skf-space-1); }
  .skf-m-xl-2 { margin: var(--skf-space-2); }
  .skf-m-xl-3 { margin: var(--skf-space-3); }
  .skf-m-xl-4 { margin: var(--skf-space-4); }
  .skf-m-xl-5 { margin: var(--skf-space-5); }
  .skf-m-xl-6 { margin: var(--skf-space-6); }
  .skf-m-xl-auto { margin: auto; }
  .skf-mt-xl-0 { margin-top: 0; }
  .skf-mt-xl-1 { margin-top: var(--skf-space-1); }
  .skf-mt-xl-2 { margin-top: var(--skf-space-2); }
  .skf-mt-xl-3 { margin-top: var(--skf-space-3); }
  .skf-mt-xl-4 { margin-top: var(--skf-space-4); }
  .skf-mt-xl-5 { margin-top: var(--skf-space-5); }
  .skf-mt-xl-6 { margin-top: var(--skf-space-6); }
  .skf-mt-xl-auto { margin-top: auto; }
  .skf-me-xl-0 { margin-inline-end: 0; }
  .skf-me-xl-1 { margin-inline-end: var(--skf-space-1); }
  .skf-me-xl-2 { margin-inline-end: var(--skf-space-2); }
  .skf-me-xl-3 { margin-inline-end: var(--skf-space-3); }
  .skf-me-xl-4 { margin-inline-end: var(--skf-space-4); }
  .skf-me-xl-5 { margin-inline-end: var(--skf-space-5); }
  .skf-me-xl-6 { margin-inline-end: var(--skf-space-6); }
  .skf-me-xl-auto { margin-inline-end: auto; }
  .skf-mb-xl-0 { margin-bottom: 0; }
  .skf-mb-xl-1 { margin-bottom: var(--skf-space-1); }
  .skf-mb-xl-2 { margin-bottom: var(--skf-space-2); }
  .skf-mb-xl-3 { margin-bottom: var(--skf-space-3); }
  .skf-mb-xl-4 { margin-bottom: var(--skf-space-4); }
  .skf-mb-xl-5 { margin-bottom: var(--skf-space-5); }
  .skf-mb-xl-6 { margin-bottom: var(--skf-space-6); }
  .skf-mb-xl-auto { margin-bottom: auto; }
  .skf-ms-xl-0 { margin-inline-start: 0; }
  .skf-ms-xl-1 { margin-inline-start: var(--skf-space-1); }
  .skf-ms-xl-2 { margin-inline-start: var(--skf-space-2); }
  .skf-ms-xl-3 { margin-inline-start: var(--skf-space-3); }
  .skf-ms-xl-4 { margin-inline-start: var(--skf-space-4); }
  .skf-ms-xl-5 { margin-inline-start: var(--skf-space-5); }
  .skf-ms-xl-6 { margin-inline-start: var(--skf-space-6); }
  .skf-ms-xl-auto { margin-inline-start: auto; }
  .skf-mx-xl-0 { margin-inline: 0; }
  .skf-mx-xl-1 { margin-inline: var(--skf-space-1); }
  .skf-mx-xl-2 { margin-inline: var(--skf-space-2); }
  .skf-mx-xl-3 { margin-inline: var(--skf-space-3); }
  .skf-mx-xl-4 { margin-inline: var(--skf-space-4); }
  .skf-mx-xl-5 { margin-inline: var(--skf-space-5); }
  .skf-mx-xl-6 { margin-inline: var(--skf-space-6); }
  .skf-mx-xl-auto { margin-inline: auto; }
  .skf-my-xl-0 { margin-block: 0; }
  .skf-my-xl-1 { margin-block: var(--skf-space-1); }
  .skf-my-xl-2 { margin-block: var(--skf-space-2); }
  .skf-my-xl-3 { margin-block: var(--skf-space-3); }
  .skf-my-xl-4 { margin-block: var(--skf-space-4); }
  .skf-my-xl-5 { margin-block: var(--skf-space-5); }
  .skf-my-xl-6 { margin-block: var(--skf-space-6); }
  .skf-my-xl-auto { margin-block: auto; }
  .skf-p-xl-0 { padding: 0; }
  .skf-p-xl-1 { padding: var(--skf-space-1); }
  .skf-p-xl-2 { padding: var(--skf-space-2); }
  .skf-p-xl-3 { padding: var(--skf-space-3); }
  .skf-p-xl-4 { padding: var(--skf-space-4); }
  .skf-p-xl-5 { padding: var(--skf-space-5); }
  .skf-p-xl-6 { padding: var(--skf-space-6); }
  .skf-pt-xl-0 { padding-top: 0; }
  .skf-pt-xl-1 { padding-top: var(--skf-space-1); }
  .skf-pt-xl-2 { padding-top: var(--skf-space-2); }
  .skf-pt-xl-3 { padding-top: var(--skf-space-3); }
  .skf-pt-xl-4 { padding-top: var(--skf-space-4); }
  .skf-pt-xl-5 { padding-top: var(--skf-space-5); }
  .skf-pt-xl-6 { padding-top: var(--skf-space-6); }
  .skf-pe-xl-0 { padding-inline-end: 0; }
  .skf-pe-xl-1 { padding-inline-end: var(--skf-space-1); }
  .skf-pe-xl-2 { padding-inline-end: var(--skf-space-2); }
  .skf-pe-xl-3 { padding-inline-end: var(--skf-space-3); }
  .skf-pe-xl-4 { padding-inline-end: var(--skf-space-4); }
  .skf-pe-xl-5 { padding-inline-end: var(--skf-space-5); }
  .skf-pe-xl-6 { padding-inline-end: var(--skf-space-6); }
  .skf-pb-xl-0 { padding-bottom: 0; }
  .skf-pb-xl-1 { padding-bottom: var(--skf-space-1); }
  .skf-pb-xl-2 { padding-bottom: var(--skf-space-2); }
  .skf-pb-xl-3 { padding-bottom: var(--skf-space-3); }
  .skf-pb-xl-4 { padding-bottom: var(--skf-space-4); }
  .skf-pb-xl-5 { padding-bottom: var(--skf-space-5); }
  .skf-pb-xl-6 { padding-bottom: var(--skf-space-6); }
  .skf-ps-xl-0 { padding-inline-start: 0; }
  .skf-ps-xl-1 { padding-inline-start: var(--skf-space-1); }
  .skf-ps-xl-2 { padding-inline-start: var(--skf-space-2); }
  .skf-ps-xl-3 { padding-inline-start: var(--skf-space-3); }
  .skf-ps-xl-4 { padding-inline-start: var(--skf-space-4); }
  .skf-ps-xl-5 { padding-inline-start: var(--skf-space-5); }
  .skf-ps-xl-6 { padding-inline-start: var(--skf-space-6); }
  .skf-px-xl-0 { padding-inline: 0; }
  .skf-px-xl-1 { padding-inline: var(--skf-space-1); }
  .skf-px-xl-2 { padding-inline: var(--skf-space-2); }
  .skf-px-xl-3 { padding-inline: var(--skf-space-3); }
  .skf-px-xl-4 { padding-inline: var(--skf-space-4); }
  .skf-px-xl-5 { padding-inline: var(--skf-space-5); }
  .skf-px-xl-6 { padding-inline: var(--skf-space-6); }
  .skf-py-xl-0 { padding-block: 0; }
  .skf-py-xl-1 { padding-block: var(--skf-space-1); }
  .skf-py-xl-2 { padding-block: var(--skf-space-2); }
  .skf-py-xl-3 { padding-block: var(--skf-space-3); }
  .skf-py-xl-4 { padding-block: var(--skf-space-4); }
  .skf-py-xl-5 { padding-block: var(--skf-space-5); }
  .skf-py-xl-6 { padding-block: var(--skf-space-6); }
  .skf-text-xl-start { text-align: start; }
  .skf-text-xl-center { text-align: center; }
  .skf-text-xl-end { text-align: end; }
  .skf-float-xl-start { float: inline-start; }
  .skf-float-xl-end { float: inline-end; }
  .skf-float-xl-none { float: none; }
}

/* ---- xxl ≥ 1400px ---- */
@media (min-width: 1400px) {
  .skf-d-xxl-none { display: none; }
  .skf-d-xxl-inline { display: inline; }
  .skf-d-xxl-inline-block { display: inline-block; }
  .skf-d-xxl-block { display: block; }
  .skf-d-xxl-grid { display: grid; }
  .skf-d-xxl-inline-grid { display: inline-grid; }
  .skf-d-xxl-flex { display: flex; }
  .skf-d-xxl-inline-flex { display: inline-flex; }
  .skf-d-xxl-table { display: table; }
  .skf-d-xxl-table-cell { display: table-cell; }
  .skf-d-xxl-table-row { display: table-row; }
  .skf-flex-xxl-row { flex-direction: row; }
  .skf-flex-xxl-row-reverse { flex-direction: row-reverse; }
  .skf-flex-xxl-column { flex-direction: column; }
  .skf-flex-xxl-column-reverse { flex-direction: column-reverse; }
  .skf-flex-xxl-wrap { flex-wrap: wrap; }
  .skf-flex-xxl-nowrap { flex-wrap: nowrap; }
  .skf-flex-xxl-wrap-reverse { flex-wrap: wrap-reverse; }
  .skf-flex-xxl-fill { flex: 1 1 auto; }
  .skf-flex-xxl-grow-0 { flex-grow: 0; }
  .skf-flex-xxl-grow-1 { flex-grow: 1; }
  .skf-flex-xxl-shrink-0 { flex-shrink: 0; }
  .skf-flex-xxl-shrink-1 { flex-shrink: 1; }
  .skf-justify-content-xxl-start { justify-content: flex-start; }
  .skf-justify-content-xxl-end { justify-content: flex-end; }
  .skf-justify-content-xxl-center { justify-content: center; }
  .skf-justify-content-xxl-between { justify-content: space-between; }
  .skf-justify-content-xxl-around { justify-content: space-around; }
  .skf-justify-content-xxl-evenly { justify-content: space-evenly; }
  .skf-align-items-xxl-start { align-items: flex-start; }
  .skf-align-items-xxl-end { align-items: flex-end; }
  .skf-align-items-xxl-center { align-items: center; }
  .skf-align-items-xxl-baseline { align-items: baseline; }
  .skf-align-items-xxl-stretch { align-items: stretch; }
  .skf-align-content-xxl-start { align-content: flex-start; }
  .skf-align-content-xxl-end { align-content: flex-end; }
  .skf-align-content-xxl-center { align-content: center; }
  .skf-align-content-xxl-between { align-content: space-between; }
  .skf-align-content-xxl-around { align-content: space-around; }
  .skf-align-content-xxl-stretch { align-content: stretch; }
  .skf-align-self-xxl-auto { align-self: auto; }
  .skf-align-self-xxl-start { align-self: flex-start; }
  .skf-align-self-xxl-end { align-self: flex-end; }
  .skf-align-self-xxl-center { align-self: center; }
  .skf-align-self-xxl-baseline { align-self: baseline; }
  .skf-align-self-xxl-stretch { align-self: stretch; }
  .skf-order-xxl-first { order: -1; }
  .skf-order-xxl-last { order: 6; }
  .skf-m-xxl-0 { margin: 0; }
  .skf-m-xxl-1 { margin: var(--skf-space-1); }
  .skf-m-xxl-2 { margin: var(--skf-space-2); }
  .skf-m-xxl-3 { margin: var(--skf-space-3); }
  .skf-m-xxl-4 { margin: var(--skf-space-4); }
  .skf-m-xxl-5 { margin: var(--skf-space-5); }
  .skf-m-xxl-6 { margin: var(--skf-space-6); }
  .skf-m-xxl-auto { margin: auto; }
  .skf-mt-xxl-0 { margin-top: 0; }
  .skf-mt-xxl-1 { margin-top: var(--skf-space-1); }
  .skf-mt-xxl-2 { margin-top: var(--skf-space-2); }
  .skf-mt-xxl-3 { margin-top: var(--skf-space-3); }
  .skf-mt-xxl-4 { margin-top: var(--skf-space-4); }
  .skf-mt-xxl-5 { margin-top: var(--skf-space-5); }
  .skf-mt-xxl-6 { margin-top: var(--skf-space-6); }
  .skf-mt-xxl-auto { margin-top: auto; }
  .skf-me-xxl-0 { margin-inline-end: 0; }
  .skf-me-xxl-1 { margin-inline-end: var(--skf-space-1); }
  .skf-me-xxl-2 { margin-inline-end: var(--skf-space-2); }
  .skf-me-xxl-3 { margin-inline-end: var(--skf-space-3); }
  .skf-me-xxl-4 { margin-inline-end: var(--skf-space-4); }
  .skf-me-xxl-5 { margin-inline-end: var(--skf-space-5); }
  .skf-me-xxl-6 { margin-inline-end: var(--skf-space-6); }
  .skf-me-xxl-auto { margin-inline-end: auto; }
  .skf-mb-xxl-0 { margin-bottom: 0; }
  .skf-mb-xxl-1 { margin-bottom: var(--skf-space-1); }
  .skf-mb-xxl-2 { margin-bottom: var(--skf-space-2); }
  .skf-mb-xxl-3 { margin-bottom: var(--skf-space-3); }
  .skf-mb-xxl-4 { margin-bottom: var(--skf-space-4); }
  .skf-mb-xxl-5 { margin-bottom: var(--skf-space-5); }
  .skf-mb-xxl-6 { margin-bottom: var(--skf-space-6); }
  .skf-mb-xxl-auto { margin-bottom: auto; }
  .skf-ms-xxl-0 { margin-inline-start: 0; }
  .skf-ms-xxl-1 { margin-inline-start: var(--skf-space-1); }
  .skf-ms-xxl-2 { margin-inline-start: var(--skf-space-2); }
  .skf-ms-xxl-3 { margin-inline-start: var(--skf-space-3); }
  .skf-ms-xxl-4 { margin-inline-start: var(--skf-space-4); }
  .skf-ms-xxl-5 { margin-inline-start: var(--skf-space-5); }
  .skf-ms-xxl-6 { margin-inline-start: var(--skf-space-6); }
  .skf-ms-xxl-auto { margin-inline-start: auto; }
  .skf-mx-xxl-0 { margin-inline: 0; }
  .skf-mx-xxl-1 { margin-inline: var(--skf-space-1); }
  .skf-mx-xxl-2 { margin-inline: var(--skf-space-2); }
  .skf-mx-xxl-3 { margin-inline: var(--skf-space-3); }
  .skf-mx-xxl-4 { margin-inline: var(--skf-space-4); }
  .skf-mx-xxl-5 { margin-inline: var(--skf-space-5); }
  .skf-mx-xxl-6 { margin-inline: var(--skf-space-6); }
  .skf-mx-xxl-auto { margin-inline: auto; }
  .skf-my-xxl-0 { margin-block: 0; }
  .skf-my-xxl-1 { margin-block: var(--skf-space-1); }
  .skf-my-xxl-2 { margin-block: var(--skf-space-2); }
  .skf-my-xxl-3 { margin-block: var(--skf-space-3); }
  .skf-my-xxl-4 { margin-block: var(--skf-space-4); }
  .skf-my-xxl-5 { margin-block: var(--skf-space-5); }
  .skf-my-xxl-6 { margin-block: var(--skf-space-6); }
  .skf-my-xxl-auto { margin-block: auto; }
  .skf-p-xxl-0 { padding: 0; }
  .skf-p-xxl-1 { padding: var(--skf-space-1); }
  .skf-p-xxl-2 { padding: var(--skf-space-2); }
  .skf-p-xxl-3 { padding: var(--skf-space-3); }
  .skf-p-xxl-4 { padding: var(--skf-space-4); }
  .skf-p-xxl-5 { padding: var(--skf-space-5); }
  .skf-p-xxl-6 { padding: var(--skf-space-6); }
  .skf-pt-xxl-0 { padding-top: 0; }
  .skf-pt-xxl-1 { padding-top: var(--skf-space-1); }
  .skf-pt-xxl-2 { padding-top: var(--skf-space-2); }
  .skf-pt-xxl-3 { padding-top: var(--skf-space-3); }
  .skf-pt-xxl-4 { padding-top: var(--skf-space-4); }
  .skf-pt-xxl-5 { padding-top: var(--skf-space-5); }
  .skf-pt-xxl-6 { padding-top: var(--skf-space-6); }
  .skf-pe-xxl-0 { padding-inline-end: 0; }
  .skf-pe-xxl-1 { padding-inline-end: var(--skf-space-1); }
  .skf-pe-xxl-2 { padding-inline-end: var(--skf-space-2); }
  .skf-pe-xxl-3 { padding-inline-end: var(--skf-space-3); }
  .skf-pe-xxl-4 { padding-inline-end: var(--skf-space-4); }
  .skf-pe-xxl-5 { padding-inline-end: var(--skf-space-5); }
  .skf-pe-xxl-6 { padding-inline-end: var(--skf-space-6); }
  .skf-pb-xxl-0 { padding-bottom: 0; }
  .skf-pb-xxl-1 { padding-bottom: var(--skf-space-1); }
  .skf-pb-xxl-2 { padding-bottom: var(--skf-space-2); }
  .skf-pb-xxl-3 { padding-bottom: var(--skf-space-3); }
  .skf-pb-xxl-4 { padding-bottom: var(--skf-space-4); }
  .skf-pb-xxl-5 { padding-bottom: var(--skf-space-5); }
  .skf-pb-xxl-6 { padding-bottom: var(--skf-space-6); }
  .skf-ps-xxl-0 { padding-inline-start: 0; }
  .skf-ps-xxl-1 { padding-inline-start: var(--skf-space-1); }
  .skf-ps-xxl-2 { padding-inline-start: var(--skf-space-2); }
  .skf-ps-xxl-3 { padding-inline-start: var(--skf-space-3); }
  .skf-ps-xxl-4 { padding-inline-start: var(--skf-space-4); }
  .skf-ps-xxl-5 { padding-inline-start: var(--skf-space-5); }
  .skf-ps-xxl-6 { padding-inline-start: var(--skf-space-6); }
  .skf-px-xxl-0 { padding-inline: 0; }
  .skf-px-xxl-1 { padding-inline: var(--skf-space-1); }
  .skf-px-xxl-2 { padding-inline: var(--skf-space-2); }
  .skf-px-xxl-3 { padding-inline: var(--skf-space-3); }
  .skf-px-xxl-4 { padding-inline: var(--skf-space-4); }
  .skf-px-xxl-5 { padding-inline: var(--skf-space-5); }
  .skf-px-xxl-6 { padding-inline: var(--skf-space-6); }
  .skf-py-xxl-0 { padding-block: 0; }
  .skf-py-xxl-1 { padding-block: var(--skf-space-1); }
  .skf-py-xxl-2 { padding-block: var(--skf-space-2); }
  .skf-py-xxl-3 { padding-block: var(--skf-space-3); }
  .skf-py-xxl-4 { padding-block: var(--skf-space-4); }
  .skf-py-xxl-5 { padding-block: var(--skf-space-5); }
  .skf-py-xxl-6 { padding-block: var(--skf-space-6); }
  .skf-text-xxl-start { text-align: start; }
  .skf-text-xxl-center { text-align: center; }
  .skf-text-xxl-end { text-align: end; }
  .skf-float-xxl-start { float: inline-start; }
  .skf-float-xxl-end { float: inline-end; }
  .skf-float-xxl-none { float: none; }
}