/**
 * Layout CSS
 *
 * Struktura strony, kontenery i nawigacja.
 */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: var(--line-height-normal);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(100% - (var(--container-pad) * 2), var(--container-max));
    margin-inline: auto;
}

.section {
    padding-block: var(--spacing-section);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0px 3px 6px #00000029;
    padding-block: var(--spacing-2);
}

.header-inner {
    min-height: 75px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-4);
    position: relative;

}

.logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--color-heading);
    letter-spacing: 0.03em;
    transition: font-size var(--transition-fast);
}

.logo a {
    color: inherit;
}


.logo .custom-logo {
    width: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: max-height var(--transition-fast);
}

.logo span {
    color: var(--color-accent);
}

.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    color: var(--color-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-fast);
    letter-spacing: 0.02em;
}

.main-nav a:hover {
    color: var(--color-accent);
}

.header-utilities {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: var(--spacing-2);
}

.header-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
    color: inherit;
}

.header-phone-cta__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.header-phone-cta__content {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height-tight);
}

.header-phone-cta__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-accent);
}

.header-phone-cta__number {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.header-phone-cta:hover .header-phone-cta__number,
.header-phone-cta:focus-visible .header-phone-cta__number {
    color: color-mix(in srgb, var(--color-accent) 80%, var(--color-heading));
}

@media (max-width: 479px) {
    .header-phone-cta {
        gap: var(--spacing-2);
    }

    .header-phone-cta__icon {
        width: 32px;
        height: 32px;
    }

    .header-phone-cta__number {
        font-size: var(--font-size-sm);
    }
}

.language-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-heading);
    text-transform: uppercase;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-heading);
    font-size: 1.3rem;
    padding: 8px;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
}

.main-nav--desktop,
.header-utilities--desktop {
    display: none;
}

.header-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: calc(var(--z-header) + 2);
    width: min(88vw, 360px);
    height: 100dvh;
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    padding: 92px var(--spacing-5) var(--spacing-8);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    overflow-y: auto;
}

.header-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) + 1);
    border: 0;
    background: rgba(13, 13, 13, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.site-header.nav-open .header-mobile-panel {
    transform: translateX(0);
}

.site-header.nav-open .header-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.main-nav--mobile .menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.main-nav--mobile a {
    text-transform: none;
    letter-spacing: 0;
}

.main-nav--mobile .menu > li > a {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.main-nav--mobile .menu > li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.main-nav--mobile .menu > li.menu-item-has-children > a::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transform: translateY(1px);
}

.main-nav--mobile .sub-menu {
    margin-top: var(--spacing-3);
    padding-left: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.main-nav--mobile .sub-menu a {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
}

.header-utilities--mobile .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 993px) {
    .header-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--spacing-8);
    }

    .logo {
        width: 220px;
    }

    .menu-toggle,
    .header-mobile-panel,
    .header-mobile-backdrop {
        display: none;
    }

    .main-nav--desktop {
        display: block;
        justify-self: center;
    }

    .main-nav--desktop .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-8);
    }

    .main-nav--desktop .menu > li {
        position: relative;
    }

    .main-nav--desktop .menu > li.menu-item-has-children > a {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
    }

    .main-nav--desktop .menu > li.menu-item-has-children > a::after {
        content: "";
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        transform: translateY(1px);
    }

    .main-nav--desktop .sub-menu {
        position: absolute;
        top: calc(100% + 14px);
        left: 0;
        min-width: 220px;
        padding: var(--spacing-3) var(--spacing-4);
        border: 1px solid var(--color-border);
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        display: grid;
        gap: var(--spacing-2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }

    .main-nav--desktop .menu > li:hover > .sub-menu,
    .main-nav--desktop .menu > li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav--desktop .sub-menu a {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-regular);
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .header-utilities--desktop {
        display: flex;
    }

    .header-utilities--mobile {
        display: none;
    }
}

@media (max-width: 1280px) {
    .main-nav a {
        font-size: var(--font-size-sm);
    }

    .main-nav--desktop .menu {
        gap: var(--spacing-4);
    }

}

@media (max-width: 640px) {
    .logo .custom-logo {
        max-height: 75px;
        height: auto;
    }
}

/* ==========================================================================
   Container - Fluid
   ========================================================================== */

   .container {
    width: min(100% - var(--container-padding) * 2, var(--container-max));
    margin-inline: auto;
}

/* Warianty kontenera */
.container--xs {
    width: min(100% - var(--container-padding) * 2, var(--container-xs));
}

.container--sm {
    width: min(100% - var(--container-padding) * 2, var(--container-sm));
}

.container--md {
    width: min(100% - var(--container-padding) * 2, var(--container-md));
}

.container--lg {
    width: min(100% - var(--container-padding) * 2, var(--container-lg));
}

.container--xl {
    width: min(100% - var(--container-padding) * 2, var(--container-xl));
}

.container--fluid {
    width: 100%;
    padding-inline: var(--container-padding);
}

/* ==========================================================================
   Główna treść (Site Main)
   ========================================================================== */

.site-main {
    flex: 1 0 auto;
}


/* ==========================================================================
   Grid System - Auto-responsive
   ========================================================================== */

.grid {
    --grid-gap: var(--spacing-8);
    --grid-min: 280px;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}

/* Grid z określoną liczbą kolumn - używa auto-fit dla responsywności */

.grid--1 {
    --grid-min: 340px;
}

.grid--2 {
    --grid-min: 300px;
}

.grid--3 {
    --grid-min: 260px;
}

.grid--4 {
    --grid-min: 220px;
}

/* Grid ze stałą liczbą kolumn (rzadko używane) */
.grid--cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Responsive Grid Columns (Mobile First) */

/* sm: 640px */
@media (min-width: 640px) {
    .grid--cols--sm-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--cols--sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols--sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--cols--sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--cols--sm-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid--cols--sm-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* md: 768px */
@media (min-width: 768px) {
    .grid--cols--md-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--cols--md-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols--md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--cols--md-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--cols--md-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid--cols--md-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* lg: 1024px */
@media (min-width: 1024px) {
    .grid--cols--lg-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--cols--lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols--lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--cols--lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--cols--lg-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid--cols--lg-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* xl: 1280px */
@media (min-width: 1280px) {
    .grid--cols--xl-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--cols--xl-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols--xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--cols--xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--cols--xl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid--cols--xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 2xl: 1536px */
@media (min-width: 1536px) {
    .grid--cols--2xl-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--cols--2xl-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols--2xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--cols--2xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--cols--2xl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid--cols--2xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Gridy asymetryczne */
.grid--3-2 {
    grid-template-columns: 3fr 2fr;
}

@media (max-width: 992px) {
    .grid--3-2 {
        grid-template-columns: 1fr;
    }
}

/* Grid gap modyfikatory */
.grid--gap-sm {
    --grid-gap: var(--spacing-4);
}

.grid--gap-lg {
    --grid-gap: var(--spacing-8);
}

.grid--gap-xl {
    --grid-gap: var(--spacing-12);
}

/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */

.flex {
    display: flex;
}

.flex--inline {
    display: inline-flex;
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    justify-content: space-between;
}

.flex--around {
    justify-content: space-around;
}

.flex--evenly {
    justify-content: space-evenly;
}

.flex--start {
    justify-content: flex-start;
}

.flex--end {
    justify-content: flex-end;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--column {
    flex-direction: column;
}

.flex--row-reverse {
    flex-direction: row-reverse;
}

.flex--column-reverse {
    flex-direction: column-reverse;
}

/* Align items */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.items-baseline {
    align-items: baseline;
}

/* Gap utilities */
.gap-1 {
    gap: var(--spacing-1);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-5 {
    gap: var(--spacing-5);
}

.gap-6 {
    gap: var(--spacing-6);
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-10 {
    gap: var(--spacing-10);
}

.gap-12 {
    gap: var(--spacing-12);
}

/* ==========================================================================
   Sekcje - Fluid padding
   ========================================================================== */

.section {
    padding-block: var(--spacing-section);
}

.section--extra-small {
    padding-block: var(--spacing-section-extra-small);
}

.section--sm {
    padding-block: var(--spacing-section-sm);
}

.section--lg {
    padding-block: var(--spacing-section-lg);
}

/* Backgrounds */
.section--gray {
    background-color: var(--color-background-gray);
    border-radius: var(--radius-base);
}

.section--dark {
    background-color: var(--color-background-dark);
    color: var(--color-text-inverse);
}

.section--soft {
    background-color: var(--color-bg-soft);
}

.section--primary {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
}

/* Section header */
.section__header {
    text-align: center;
    margin-inline: auto;
    margin-bottom: var(--spacing-section-sm);
}

@media (max-width: 1024px) {
    .section__header {
        margin-bottom: var(--spacing-8);
    }
}

@media (max-width: 640px) {
    .section__header {
        margin-bottom: var(--spacing-6);
    }
}

.section__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
}

.section--dark .section__title,
.section--primary .section__title {
    color: var(--color-white);
}

.section__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
}

.section__subtitle a {
    color: var(--color-primary);
}

.section--dark .section__subtitle,
.section--primary .section__subtitle {
    color: var(--color-gray-300);
}

/* Section header align */
.section__header--left {
    text-align: left;
    margin-inline: 0;
}

.section__header--right {
    text-align: right;
    margin-inline: 0;
    margin-left: auto;
}

/* ==========================================================================
   Two Column Layout
   ========================================================================== */

.two-col {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    align-items: center;
}

.two-col--reverse {
    direction: rtl;
}

.two-col--reverse>* {
    direction: ltr;
}

/* Asymetryczne proporcje */
.two-col--sidebar {
    grid-template-columns: minmax(min(300px, 100%), 1fr) minmax(min(200px, 100%), 280px);
}

.two-col--sidebar-left {
    grid-template-columns: minmax(min(200px, 100%), 280px) minmax(min(300px, 100%), 1fr);
}

/* ==========================================================================
   Wrapper dla pełnej szerokości z containerd content
   ========================================================================== */

.full-width {
    width: 100%;
    padding-inline: var(--container-padding);
}

.full-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* ==========================================================================
   Spacing Utilities (m/p 1-5 + responsive variants)
   ========================================================================== */

/* Rozdzielona skala: margin jest krokiem "szerszym" niz padding. */
:root {
    --space-m-1: var(--spacing-2);
    --space-m-2: var(--spacing-3);
    --space-m-3: var(--spacing-4);
    --space-m-4: var(--spacing-5);
    --space-m-5: var(--spacing-6);

    --space-p-1: var(--spacing-1);
    --space-p-2: var(--spacing-2);
    --space-p-3: var(--spacing-3);
    --space-p-4: var(--spacing-4);
    --space-p-5: var(--spacing-5);
}

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-inline: 0 !important; }
.my-0 { margin-block: 0 !important; }

.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto { margin-inline: auto !important; }
.my-auto { margin-block: auto !important; }

.m-1 { margin: var(--space-m-1) !important  ; }
.mt-1 { margin-top: var(--space-m-1) !important; }
.mr-1 { margin-right: var(--space-m-1) !important; }
.mb-1 { margin-bottom: var(--space-m-1) !important  ; }
.ml-1 { margin-left: var(--space-m-1) !important; }
.mx-1 { margin-inline: var(--space-m-1) !important; }
.my-1 { margin-block: var(--space-m-1) !important; }

.m-2 { margin: var(--space-m-2) !important; }
.mt-2 { margin-top: var(--space-m-2) !important; }
.mr-2 { margin-right: var(--space-m-2) !important; }
.mb-2 { margin-bottom: var(--space-m-2) !important; }
.ml-2 { margin-left: var(--space-m-2) !important; }
.mx-2 { margin-inline: var(--space-m-2) !important; }
.my-2 { margin-block: var(--space-m-2) !important; }

.m-3 { margin: var(--space-m-3) !important; }
.mt-3 { margin-top: var(--space-m-3) !important; }
.mr-3 { margin-right: var(--space-m-3) !important; }
.mb-3 { margin-bottom: var(--space-m-3) !important; }
.ml-3 { margin-left: var(--space-m-3) !important; }
.mx-3 { margin-inline: var(--space-m-3) !important; }
.my-3 { margin-block: var(--space-m-3) !important; }

.m-4 { margin: var(--space-m-4) !important; }
.mt-4 { margin-top: var(--space-m-4) !important; }
.mr-4 { margin-right: var(--space-m-4) !important; }
.mb-4 { margin-bottom: var(--space-m-4) !important; }
.ml-4 { margin-left: var(--space-m-4) !important; }
.mx-4 { margin-inline: var(--space-m-4) !important; }
.my-4 { margin-block: var(--space-m-4) !important; }

.m-5 { margin: var(--space-m-5) !important; }
.mt-5 { margin-top: var(--space-m-5) !important; }
.mr-5 { margin-right: var(--space-m-5) !important; }
.mb-5 { margin-bottom: var(--space-m-5) !important; }
.ml-5 { margin-left: var(--space-m-5) !important; }
.mx-5 { margin-inline: var(--space-m-5) !important; }
.my-5 { margin-block: var(--space-m-5) !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-inline: 0 !important; }
.py-0 { padding-block: 0 !important; }

.p-1 { padding: var(--space-p-1) !important; }
.pt-1 { padding-top: var(--space-p-1) !important; }
.pr-1 { padding-right: var(--space-p-1) !important; }
.pb-1 { padding-bottom: var(--space-p-1) !important; }
.pl-1 { padding-left: var(--space-p-1) !important; }
.px-1 { padding-inline: var(--space-p-1) !important; }
.py-1 { padding-block: var(--space-p-1) !important; }

.p-2 { padding: var(--space-p-2) !important; }
.pt-2 { padding-top: var(--space-p-2) !important; }
.pr-2 { padding-right: var(--space-p-2) !important; }
.pb-2 { padding-bottom: var(--space-p-2) !important; }
.pl-2 { padding-left: var(--space-p-2) !important; }
.px-2 { padding-inline: var(--space-p-2) !important; }
.py-2 { padding-block: var(--space-p-2) !important; }

.p-3 { padding: var(--space-p-3) !important; }
.pt-3 { padding-top: var(--space-p-3) !important; }
.pr-3 { padding-right: var(--space-p-3) !important; }
.pb-3 { padding-bottom: var(--space-p-3) !important; }
.pl-3 { padding-left: var(--space-p-3) !important; }
.px-3 { padding-inline: var(--space-p-3) !important; }
.py-3 { padding-block: var(--space-p-3) !important; }

.p-4 { padding: var(--space-p-4) !important; }
.pt-4 { padding-top: var(--space-p-4) !important; }
.pr-4 { padding-right: var(--space-p-4) !important; }
.pb-4 { padding-bottom: var(--space-p-4) !important; }
.pl-4 { padding-left: var(--space-p-4) !important; }
.px-4 { padding-inline: var(--space-p-4) !important; }
.py-4 { padding-block: var(--space-p-4) !important; }

.p-5 { padding: var(--space-p-5) !important; }
.pt-5 { padding-top: var(--space-p-5) !important; }
.pr-5 { padding-right: var(--space-p-5) !important; }
.pb-5 { padding-bottom: var(--space-p-5) !important; }
.pl-5 { padding-left: var(--space-p-5) !important; }
.px-5 { padding-inline: var(--space-p-5) !important; }
.py-5 { padding-block: var(--space-p-5) !important; }

/* sm: 640px */
@media (min-width: 640px) {
    .m-sm-0 { margin: 0 !important; }
    .mt-sm-0 { margin-top: 0 !important; }
    .mr-sm-0 { margin-right: 0 !important; }
    .mb-sm-0 { margin-bottom: 0 !important; }
    .ml-sm-0 { margin-left: 0 !important; }
    .mx-sm-0 { margin-inline: 0 !important; }
    .my-sm-0 { margin-block: 0 !important; }

    .m-sm-auto { margin: auto !important; }
    .mt-sm-auto { margin-top: auto !important; }
    .mr-sm-auto { margin-right: auto !important; }
    .mb-sm-auto { margin-bottom: auto !important; }
    .ml-sm-auto { margin-left: auto !important; }
    .mx-sm-auto { margin-inline: auto !important; }
    .my-sm-auto { margin-block: auto !important; }

    .m-sm-1 { margin: var(--space-m-1) !important; }
    .mt-sm-1 { margin-top: var(--space-m-1) !important; }
    .mr-sm-1 { margin-right: var(--space-m-1) !important; }
    .mb-sm-1 { margin-bottom: var(--space-m-1) !important; }
    .ml-sm-1 { margin-left: var(--space-m-1) !important; }
    .mx-sm-1 { margin-inline: var(--space-m-1) !important; }
    .my-sm-1 { margin-block: var(--space-m-1) !important; }

    .m-sm-2 { margin: var(--space-m-2) !important; }
    .mt-sm-2 { margin-top: var(--space-m-2) !important; }
    .mr-sm-2 { margin-right: var(--space-m-2) !important; }
    .mb-sm-2 { margin-bottom: var(--space-m-2) !important; }
    .ml-sm-2 { margin-left: var(--space-m-2) !important; }
    .mx-sm-2 { margin-inline: var(--space-m-2) !important; }
    .my-sm-2 { margin-block: var(--space-m-2) !important; }

    .m-sm-3 { margin: var(--space-m-3) !important; }
    .mt-sm-3 { margin-top: var(--space-m-3) !important; }
    .mr-sm-3 { margin-right: var(--space-m-3) !important; }
    .mb-sm-3 { margin-bottom: var(--space-m-3) !important; }
    .ml-sm-3 { margin-left: var(--space-m-3) !important; }
    .mx-sm-3 { margin-inline: var(--space-m-3) !important; }
    .my-sm-3 { margin-block: var(--space-m-3) !important; }

    .m-sm-4 { margin: var(--space-m-4) !important; }
    .mt-sm-4 { margin-top: var(--space-m-4) !important; }
    .mr-sm-4 { margin-right: var(--space-m-4) !important; }
    .mb-sm-4 { margin-bottom: var(--space-m-4) !important; }
    .ml-sm-4 { margin-left: var(--space-m-4) !important; }
    .mx-sm-4 { margin-inline: var(--space-m-4) !important; }
    .my-sm-4 { margin-block: var(--space-m-4) !important; }

    .m-sm-5 { margin: var(--space-m-5) !important; }
    .mt-sm-5 { margin-top: var(--space-m-5) !important; }
    .mr-sm-5 { margin-right: var(--space-m-5) !important; }
    .mb-sm-5 { margin-bottom: var(--space-m-5) !important; }
    .ml-sm-5 { margin-left: var(--space-m-5) !important; }
    .mx-sm-5 { margin-inline: var(--space-m-5) !important; }
    .my-sm-5 { margin-block: var(--space-m-5) !important; }

    .p-sm-0 { padding: 0 !important; }
    .pt-sm-0 { padding-top: 0 !important; }
    .pr-sm-0 { padding-right: 0 !important; }
    .pb-sm-0 { padding-bottom: 0 !important; }
    .pl-sm-0 { padding-left: 0 !important; }
    .px-sm-0 { padding-inline: 0 !important; }
    .py-sm-0 { padding-block: 0 !important; }

    .p-sm-1 { padding: var(--space-p-1) !important; }
    .pt-sm-1 { padding-top: var(--space-p-1) !important; }
    .pr-sm-1 { padding-right: var(--space-p-1) !important; }
    .pb-sm-1 { padding-bottom: var(--space-p-1) !important; }
    .pl-sm-1 { padding-left: var(--space-p-1) !important; }
    .px-sm-1 { padding-inline: var(--space-p-1) !important; }
    .py-sm-1 { padding-block: var(--space-p-1) !important; }

    .p-sm-2 { padding: var(--space-p-2) !important; }
    .pt-sm-2 { padding-top: var(--space-p-2) !important; }
    .pr-sm-2 { padding-right: var(--space-p-2) !important; }
    .pb-sm-2 { padding-bottom: var(--space-p-2) !important; }
    .pl-sm-2 { padding-left: var(--space-p-2) !important; }
    .px-sm-2 { padding-inline: var(--space-p-2) !important; }
    .py-sm-2 { padding-block: var(--space-p-2) !important; }

    .p-sm-3 { padding: var(--space-p-3) !important; }
    .pt-sm-3 { padding-top: var(--space-p-3) !important; }
    .pr-sm-3 { padding-right: var(--space-p-3) !important; }
    .pb-sm-3 { padding-bottom: var(--space-p-3) !important; }
    .pl-sm-3 { padding-left: var(--space-p-3) !important; }
    .px-sm-3 { padding-inline: var(--space-p-3) !important; }
    .py-sm-3 { padding-block: var(--space-p-3) !important; }

    .p-sm-4 { padding: var(--space-p-4) !important; }
    .pt-sm-4 { padding-top: var(--space-p-4) !important; }
    .pr-sm-4 { padding-right: var(--space-p-4) !important; }
    .pb-sm-4 { padding-bottom: var(--space-p-4) !important; }
    .pl-sm-4 { padding-left: var(--space-p-4) !important; }
    .px-sm-4 { padding-inline: var(--space-p-4) !important; }
    .py-sm-4 { padding-block: var(--space-p-4) !important; }

    .p-sm-5 { padding: var(--space-p-5) !important; }
    .pt-sm-5 { padding-top: var(--space-p-5) !important; }
    .pr-sm-5 { padding-right: var(--space-p-5) !important; }
    .pb-sm-5 { padding-bottom: var(--space-p-5) !important; }
    .pl-sm-5 { padding-left: var(--space-p-5) !important; }
    .px-sm-5 { padding-inline: var(--space-p-5) !important; }
    .py-sm-5 { padding-block: var(--space-p-5) !important; }
}

/* md: 768px */
@media (min-width: 768px) {
    .m-md-0 { margin: 0 !important; }
    .mt-md-0 { margin-top: 0 !important; }
    .mr-md-0 { margin-right: 0 !important; }
    .mb-md-0 { margin-bottom: 0 !important; }
    .ml-md-0 { margin-left: 0 !important; }
    .mx-md-0 { margin-inline: 0 !important; }
    .my-md-0 { margin-block: 0 !important; }

    .m-md-auto { margin: auto !important; }
    .mt-md-auto { margin-top: auto !important; }
    .mr-md-auto { margin-right: auto !important; }
    .mb-md-auto { margin-bottom: auto !important; }
    .ml-md-auto { margin-left: auto !important; }
    .mx-md-auto { margin-inline: auto !important; }
    .my-md-auto { margin-block: auto !important; }

    .m-md-1 { margin: var(--space-m-1) !important; }
    .mt-md-1 { margin-top: var(--space-m-1) !important; }
    .mr-md-1 { margin-right: var(--space-m-1) !important; }
    .mb-md-1 { margin-bottom: var(--space-m-1) !important; }
    .ml-md-1 { margin-left: var(--space-m-1) !important; }
    .mx-md-1 { margin-inline: var(--space-m-1) !important; }
    .my-md-1 { margin-block: var(--space-m-1) !important; }

    .m-md-2 { margin: var(--space-m-2) !important; }
    .mt-md-2 { margin-top: var(--space-m-2) !important; }
    .mr-md-2 { margin-right: var(--space-m-2) !important; }
    .mb-md-2 { margin-bottom: var(--space-m-2) !important; }
    .ml-md-2 { margin-left: var(--space-m-2) !important; }
    .mx-md-2 { margin-inline: var(--space-m-2) !important; }
    .my-md-2 { margin-block: var(--space-m-2) !important; }

    .m-md-3 { margin: var(--space-m-3) !important; }
    .mt-md-3 { margin-top: var(--space-m-3) !important; }
    .mr-md-3 { margin-right: var(--space-m-3) !important; }
    .mb-md-3 { margin-bottom: var(--space-m-3) !important; }
    .ml-md-3 { margin-left: var(--space-m-3) !important; }
    .mx-md-3 { margin-inline: var(--space-m-3) !important; }
    .my-md-3 { margin-block: var(--space-m-3) !important; }

    .m-md-4 { margin: var(--space-m-4) !important; }
    .mt-md-4 { margin-top: var(--space-m-4) !important; }
    .mr-md-4 { margin-right: var(--space-m-4) !important; }
    .mb-md-4 { margin-bottom: var(--space-m-4) !important; }
    .ml-md-4 { margin-left: var(--space-m-4) !important; }
    .mx-md-4 { margin-inline: var(--space-m-4) !important; }
    .my-md-4 { margin-block: var(--space-m-4) !important; }

    .m-md-5 { margin: var(--space-m-5) !important; }
    .mt-md-5 { margin-top: var(--space-m-5) !important; }
    .mr-md-5 { margin-right: var(--space-m-5) !important; }
    .mb-md-5 { margin-bottom: var(--space-m-5) !important; }
    .ml-md-5 { margin-left: var(--space-m-5) !important; }
    .mx-md-5 { margin-inline: var(--space-m-5) !important; }
    .my-md-5 { margin-block: var(--space-m-5) !important; }

    .p-md-0 { padding: 0 !important; }
    .pt-md-0 { padding-top: 0 !important; }
    .pr-md-0 { padding-right: 0 !important; }
    .pb-md-0 { padding-bottom: 0 !important; }
    .pl-md-0 { padding-left: 0 !important; }
    .px-md-0 { padding-inline: 0 !important; }
    .py-md-0 { padding-block: 0 !important; }

    .p-md-1 { padding: var(--space-p-1) !important; }
    .pt-md-1 { padding-top: var(--space-p-1) !important; }
    .pr-md-1 { padding-right: var(--space-p-1) !important; }
    .pb-md-1 { padding-bottom: var(--space-p-1) !important; }
    .pl-md-1 { padding-left: var(--space-p-1) !important; }
    .px-md-1 { padding-inline: var(--space-p-1) !important; }
    .py-md-1 { padding-block: var(--space-p-1) !important; }

    .p-md-2 { padding: var(--space-p-2) !important; }
    .pt-md-2 { padding-top: var(--space-p-2) !important; }
    .pr-md-2 { padding-right: var(--space-p-2) !important; }
    .pb-md-2 { padding-bottom: var(--space-p-2) !important; }
    .pl-md-2 { padding-left: var(--space-p-2) !important; }
    .px-md-2 { padding-inline: var(--space-p-2) !important; }
    .py-md-2 { padding-block: var(--space-p-2) !important; }

    .p-md-3 { padding: var(--space-p-3) !important; }
    .pt-md-3 { padding-top: var(--space-p-3) !important; }
    .pr-md-3 { padding-right: var(--space-p-3) !important; }
    .pb-md-3 { padding-bottom: var(--space-p-3) !important; }
    .pl-md-3 { padding-left: var(--space-p-3) !important; }
    .px-md-3 { padding-inline: var(--space-p-3) !important; }
    .py-md-3 { padding-block: var(--space-p-3) !important; }

    .p-md-4 { padding: var(--space-p-4) !important; }
    .pt-md-4 { padding-top: var(--space-p-4) !important; }
    .pr-md-4 { padding-right: var(--space-p-4) !important; }
    .pb-md-4 { padding-bottom: var(--space-p-4) !important; }
    .pl-md-4 { padding-left: var(--space-p-4) !important; }
    .px-md-4 { padding-inline: var(--space-p-4) !important; }
    .py-md-4 { padding-block: var(--space-p-4) !important; }

    .p-md-5 { padding: var(--space-p-5) !important; }
    .pt-md-5 { padding-top: var(--space-p-5) !important; }
    .pr-md-5 { padding-right: var(--space-p-5) !important; }
    .pb-md-5 { padding-bottom: var(--space-p-5) !important; }
    .pl-md-5 { padding-left: var(--space-p-5) !important; }
    .px-md-5 { padding-inline: var(--space-p-5) !important; }
    .py-md-5 { padding-block: var(--space-p-5) !important; }
}

/* lg: 992px */
@media (min-width: 992px) {
    .m-lg-0 { margin: 0 !important; }
    .mt-lg-0 { margin-top: 0 !important; }
    .mr-lg-0 { margin-right: 0 !important; }
    .mb-lg-0 { margin-bottom: 0 !important; }
    .ml-lg-0 { margin-left: 0 !important; }
    .mx-lg-0 { margin-inline: 0 !important; }
    .my-lg-0 { margin-block: 0 !important; }

    .m-lg-auto { margin: auto !important; }
    .mt-lg-auto { margin-top: auto !important; }
    .mr-lg-auto { margin-right: auto !important; }
    .mb-lg-auto { margin-bottom: auto !important; }
    .ml-lg-auto { margin-left: auto !important; }
    .mx-lg-auto { margin-inline: auto !important; }
    .my-lg-auto { margin-block: auto !important; }

    .m-lg-1 { margin: var(--space-m-1) !important; }
    .mt-lg-1 { margin-top: var(--space-m-1) !important; }
    .mr-lg-1 { margin-right: var(--space-m-1) !important; }
    .mb-lg-1 { margin-bottom: var(--space-m-1) !important; }
    .ml-lg-1 { margin-left: var(--space-m-1) !important; }
    .mx-lg-1 { margin-inline: var(--space-m-1) !important; }
    .my-lg-1 { margin-block: var(--space-m-1) !important; }

    .m-lg-2 { margin: var(--space-m-2) !important; }
    .mt-lg-2 { margin-top: var(--space-m-2) !important; }
    .mr-lg-2 { margin-right: var(--space-m-2) !important; }
    .mb-lg-2 { margin-bottom: var(--space-m-2) !important; }
    .ml-lg-2 { margin-left: var(--space-m-2) !important; }
    .mx-lg-2 { margin-inline: var(--space-m-2) !important; }
    .my-lg-2 { margin-block: var(--space-m-2) !important; }

    .m-lg-3 { margin: var(--space-m-3) !important; }
    .mt-lg-3 { margin-top: var(--space-m-3) !important; }
    .mr-lg-3 { margin-right: var(--space-m-3) !important; }
    .mb-lg-3 { margin-bottom: var(--space-m-3) !important; }
    .ml-lg-3 { margin-left: var(--space-m-3) !important; }
    .mx-lg-3 { margin-inline: var(--space-m-3) !important; }
    .my-lg-3 { margin-block: var(--space-m-3) !important; }

    .m-lg-4 { margin: var(--space-m-4) !important; }
    .mt-lg-4 { margin-top: var(--space-m-4) !important; }
    .mr-lg-4 { margin-right: var(--space-m-4) !important; }
    .mb-lg-4 { margin-bottom: var(--space-m-4) !important; }
    .ml-lg-4 { margin-left: var(--space-m-4) !important; }
    .mx-lg-4 { margin-inline: var(--space-m-4) !important; }
    .my-lg-4 { margin-block: var(--space-m-4) !important; }

    .m-lg-5 { margin: var(--space-m-5) !important; }
    .mt-lg-5 { margin-top: var(--space-m-5) !important; }
    .mr-lg-5 { margin-right: var(--space-m-5) !important; }
    .mb-lg-5 { margin-bottom: var(--space-m-5) !important; }
    .ml-lg-5 { margin-left: var(--space-m-5) !important; }
    .mx-lg-5 { margin-inline: var(--space-m-5) !important; }
    .my-lg-5 { margin-block: var(--space-m-5) !important; }

    .p-lg-0 { padding: 0 !important; }
    .pt-lg-0 { padding-top: 0 !important; }
    .pr-lg-0 { padding-right: 0 !important; }
    .pb-lg-0 { padding-bottom: 0 !important; }
    .pl-lg-0 { padding-left: 0 !important; }
    .px-lg-0 { padding-inline: 0 !important; }
    .py-lg-0 { padding-block: 0 !important; }

    .p-lg-1 { padding: var(--space-p-1) !important; }
    .pt-lg-1 { padding-top: var(--space-p-1) !important; }
    .pr-lg-1 { padding-right: var(--space-p-1) !important; }
    .pb-lg-1 { padding-bottom: var(--space-p-1) !important; }
    .pl-lg-1 { padding-left: var(--space-p-1) !important; }
    .px-lg-1 { padding-inline: var(--space-p-1) !important; }
    .py-lg-1 { padding-block: var(--space-p-1) !important; }

    .p-lg-2 { padding: var(--space-p-2) !important; }
    .pt-lg-2 { padding-top: var(--space-p-2) !important; }
    .pr-lg-2 { padding-right: var(--space-p-2) !important; }
    .pb-lg-2 { padding-bottom: var(--space-p-2) !important; }
    .pl-lg-2 { padding-left: var(--space-p-2) !important; }
    .px-lg-2 { padding-inline: var(--space-p-2) !important; }
    .py-lg-2 { padding-block: var(--space-p-2) !important; }

    .p-lg-3 { padding: var(--space-p-3) !important; }
    .pt-lg-3 { padding-top: var(--space-p-3) !important; }
    .pr-lg-3 { padding-right: var(--space-p-3) !important; }
    .pb-lg-3 { padding-bottom: var(--space-p-3) !important; }
    .pl-lg-3 { padding-left: var(--space-p-3) !important; }
    .px-lg-3 { padding-inline: var(--space-p-3) !important; }
    .py-lg-3 { padding-block: var(--space-p-3) !important; }

    .p-lg-4 { padding: var(--space-p-4) !important; }
    .pt-lg-4 { padding-top: var(--space-p-4) !important; }
    .pr-lg-4 { padding-right: var(--space-p-4) !important; }
    .pb-lg-4 { padding-bottom: var(--space-p-4) !important; }
    .pl-lg-4 { padding-left: var(--space-p-4) !important; }
    .px-lg-4 { padding-inline: var(--space-p-4) !important; }
    .py-lg-4 { padding-block: var(--space-p-4) !important; }

    .p-lg-5 { padding: var(--space-p-5) !important; }
    .pt-lg-5 { padding-top: var(--space-p-5) !important; }
    .pr-lg-5 { padding-right: var(--space-p-5) !important; }
    .pb-lg-5 { padding-bottom: var(--space-p-5) !important; }
    .pl-lg-5 { padding-left: var(--space-p-5) !important; }
    .px-lg-5 { padding-inline: var(--space-p-5) !important; }
    .py-lg-5 { padding-block: var(--space-p-5) !important; }
}

/* xl: 1024px */
@media (min-width: 1024px) {
    .m-xl-0 { margin: 0 !important; }
    .mt-xl-0 { margin-top: 0 !important; }
    .mr-xl-0 { margin-right: 0 !important; }
    .mb-xl-0 { margin-bottom: 0 !important; }
    .ml-xl-0 { margin-left: 0 !important; }
    .mx-xl-0 { margin-inline: 0; }
    .my-xl-0 { margin-block: 0; }

    .m-xl-auto { margin: auto !important; }
    .mt-xl-auto { margin-top: auto !important; }
    .mr-xl-auto { margin-right: auto !important; }
    .mb-xl-auto { margin-bottom: auto !important; }
    .ml-xl-auto { margin-left: auto !important; }
    .mx-xl-auto { margin-inline: auto !important; }
    .my-xl-auto { margin-block: auto !important; }

    .m-xl-1 { margin: var(--space-m-1) !important; }
    .mt-xl-1 { margin-top: var(--space-m-1) !important; }
    .mr-xl-1 { margin-right: var(--space-m-1) !important; }
    .mb-xl-1 { margin-bottom: var(--space-m-1) !important; }
    .ml-xl-1 { margin-left: var(--space-m-1) !important; }
    .mx-xl-1 { margin-inline: var(--space-m-1) !important; }
    .my-xl-1 { margin-block: var(--space-m-1) !important; }

    .m-xl-2 { margin: var(--space-m-2) !important; }
    .mt-xl-2 { margin-top: var(--space-m-2) !important; }
    .mr-xl-2 { margin-right: var(--space-m-2) !important; }
    .mb-xl-2 { margin-bottom: var(--space-m-2) !important; }
    .ml-xl-2 { margin-left: var(--space-m-2) !important; }
    .mx-xl-2 { margin-inline: var(--space-m-2) !important; }
    .my-xl-2 { margin-block: var(--space-m-2) !important; }

    .m-xl-3 { margin: var(--space-m-3) !important; }
    .mt-xl-3 { margin-top: var(--space-m-3) !important; }
    .mr-xl-3 { margin-right: var(--space-m-3) !important; }
    .mb-xl-3 { margin-bottom: var(--space-m-3) !important; }
    .ml-xl-3 { margin-left: var(--space-m-3) !important; }
    .mx-xl-3 { margin-inline: var(--space-m-3) !important; }
    .my-xl-3 { margin-block: var(--space-m-3) !important; }

    .m-xl-4 { margin: var(--space-m-4) !important; }
    .mt-xl-4 { margin-top: var(--space-m-4) !important; }
    .mr-xl-4 { margin-right: var(--space-m-4) !important; }
    .mb-xl-4 { margin-bottom: var(--space-m-4) !important; }
    .ml-xl-4 { margin-left: var(--space-m-4) !important; }
    .mx-xl-4 { margin-inline: var(--space-m-4) !important; }
    .my-xl-4 { margin-block: var(--space-m-4) !important; }

    .m-xl-5 { margin: var(--space-m-5) !important; }
    .mt-xl-5 { margin-top: var(--space-m-5) !important; }
    .mr-xl-5 { margin-right: var(--space-m-5) !important; }
    .mb-xl-5 { margin-bottom: var(--space-m-5) !important; }
    .ml-xl-5 { margin-left: var(--space-m-5) !important; }
    .mx-xl-5 { margin-inline: var(--space-m-5) !important; }
    .my-xl-5 { margin-block: var(--space-m-5) !important; }

    .p-xl-0 { padding: 0 !important; }
    .pt-xl-0 { padding-top: 0 !important; }
    .pr-xl-0 { padding-right: 0 !important; }
    .pb-xl-0 { padding-bottom: 0 !important; }
    .pl-xl-0 { padding-left: 0 !important; }
    .px-xl-0 { padding-inline: 0 !important; }
    .py-xl-0 { padding-block: 0 !important; }

    .p-xl-1 { padding: var(--space-p-1) !important; }
    .pt-xl-1 { padding-top: var(--space-p-1) !important; }
    .pr-xl-1 { padding-right: var(--space-p-1) !important; }
    .pb-xl-1 { padding-bottom: var(--space-p-1) !important; }
    .pl-xl-1 { padding-left: var(--space-p-1) !important; }
    .px-xl-1 { padding-inline: var(--space-p-1) !important; }
    .py-xl-1 { padding-block: var(--space-p-1) !important; }

    .p-xl-2 { padding: var(--space-p-2) !important; }
    .pt-xl-2 { padding-top: var(--space-p-2) !important; }
    .pr-xl-2 { padding-right: var(--space-p-2) !important; }
    .pb-xl-2 { padding-bottom: var(--space-p-2) !important; }
    .pl-xl-2 { padding-left: var(--space-p-2) !important; }
    .px-xl-2 { padding-inline: var(--space-p-2) !important; }
    .py-xl-2 { padding-block: var(--space-p-2) !important; }

    .p-xl-3 { padding: var(--space-p-3) !important; }
    .pt-xl-3 { padding-top: var(--space-p-3) !important; }
    .pr-xl-3 { padding-right: var(--space-p-3) !important; }
    .pb-xl-3 { padding-bottom: var(--space-p-3) !important; }
    .pl-xl-3 { padding-left: var(--space-p-3) !important; }
    .px-xl-3 { padding-inline: var(--space-p-3) !important; }
    .py-xl-3 { padding-block: var(--space-p-3) !important; }

    .p-xl-4 { padding: var(--space-p-4) !important; }
    .pt-xl-4 { padding-top: var(--space-p-4) !important; }
    .pr-xl-4 { padding-right: var(--space-p-4) !important; }
    .pb-xl-4 { padding-bottom: var(--space-p-4) !important; }
    .pl-xl-4 { padding-left: var(--space-p-4) !important; }
    .px-xl-4 { padding-inline: var(--space-p-4) !important; }
    .py-xl-4 { padding-block: var(--space-p-4) !important; }

    .p-xl-5 { padding: var(--space-p-5) !important; }
    .pt-xl-5 { padding-top: var(--space-p-5) !important; }
    .pr-xl-5 { padding-right: var(--space-p-5) !important; }
    .pb-xl-5 { padding-bottom: var(--space-p-5) !important; }
    .pl-xl-5 { padding-left: var(--space-p-5) !important; }
    .px-xl-5 { padding-inline: var(--space-p-5) !important; }
    .py-xl-5 { padding-block: var(--space-p-5) !important; }
}

/* 2xl: 1280px */
@media (min-width: 1280px) {
    .m-2xl-0 { margin: 0 !important; }
    .mt-2xl-0 { margin-top: 0 !important; }
    .mr-2xl-0 { margin-right: 0 !important; }
    .mb-2xl-0 { margin-bottom: 0 !important; }
    .ml-2xl-0 { margin-left: 0 !important; }
    .mx-2xl-0 { margin-inline: 0 !important; }
    .my-2xl-0 { margin-block: 0 !important; }

    .m-2xl-auto { margin: auto !important; }
    .mt-2xl-auto { margin-top: auto !important; }
    .mr-2xl-auto { margin-right: auto !important; }
    .mb-2xl-auto { margin-bottom: auto !important; }
    .ml-2xl-auto { margin-left: auto !important; }
    .mx-2xl-auto { margin-inline: auto !important; }
    .my-2xl-auto { margin-block: auto !important; }

    .m-2xl-1 { margin: var(--space-m-1) !important; }
    .mt-2xl-1 { margin-top: var(--space-m-1) !important; }
    .mr-2xl-1 { margin-right: var(--space-m-1) !important; }
    .mb-2xl-1 { margin-bottom: var(--space-m-1) !important; }
    .ml-2xl-1 { margin-left: var(--space-m-1) !important; }
    .mx-2xl-1 { margin-inline: var(--space-m-1) !important; }
    .my-2xl-1 { margin-block: var(--space-m-1) !important; }

    .m-2xl-2 { margin: var(--space-m-2) !important; }
    .mt-2xl-2 { margin-top: var(--space-m-2) !important; }
    .mr-2xl-2 { margin-right: var(--space-m-2) !important; }
    .mb-2xl-2 { margin-bottom: var(--space-m-2) !important; }
    .ml-2xl-2 { margin-left: var(--space-m-2) !important; }
    .mx-2xl-2 { margin-inline: var(--space-m-2) !important; }
    .my-2xl-2 { margin-block: var(--space-m-2) !important; }

    .m-2xl-3 { margin: var(--space-m-3) !important; }
    .mt-2xl-3 { margin-top: var(--space-m-3) !important; }
    .mr-2xl-3 { margin-right: var(--space-m-3) !important; }
    .mb-2xl-3 { margin-bottom: var(--space-m-3) !important; }
    .ml-2xl-3 { margin-left: var(--space-m-3) !important; }
    .mx-2xl-3 { margin-inline: var(--space-m-3) !important; }
    .my-2xl-3 { margin-block: var(--space-m-3) !important; }

    .m-2xl-4 { margin: var(--space-m-4) !important; }
    .mt-2xl-4 { margin-top: var(--space-m-4) !important; }
    .mr-2xl-4 { margin-right: var(--space-m-4) !important; }
    .mb-2xl-4 { margin-bottom: var(--space-m-4) !important; }
    .ml-2xl-4 { margin-left: var(--space-m-4) !important; }
    .mx-2xl-4 { margin-inline: var(--space-m-4) !important; }
    .my-2xl-4 { margin-block: var(--space-m-4) !important; }

    .m-2xl-5 { margin: var(--space-m-5) !important; }
    .mt-2xl-5 { margin-top: var(--space-m-5) !important; }
    .mr-2xl-5 { margin-right: var(--space-m-5) !important; }
    .mb-2xl-5 { margin-bottom: var(--space-m-5) !important; }
    .ml-2xl-5 { margin-left: var(--space-m-5) !important; }
    .mx-2xl-5 { margin-inline: var(--space-m-5) !important; }
    .my-2xl-5 { margin-block: var(--space-m-5) !important; }

    .p-2xl-0 { padding: 0 !important; }
    .pt-2xl-0 { padding-top: 0 !important; }
    .pr-2xl-0 { padding-right: 0 !important; }
    .pb-2xl-0 { padding-bottom: 0 !important; }
    .pl-2xl-0 { padding-left: 0 !important; }
    .px-2xl-0 { padding-inline: 0 !important; }
    .py-2xl-0 { padding-block: 0 !important; }

    .p-2xl-1 { padding: var(--space-p-1) !important; }
    .pt-2xl-1 { padding-top: var(--space-p-1) !important; }
    .pr-2xl-1 { padding-right: var(--space-p-1) !important; }
    .pb-2xl-1 { padding-bottom: var(--space-p-1) !important; }
    .pl-2xl-1 { padding-left: var(--space-p-1) !important; }
    .px-2xl-1 { padding-inline: var(--space-p-1) !important; }
    .py-2xl-1 { padding-block: var(--space-p-1) !important; }

    .p-2xl-2 { padding: var(--space-p-2) !important; }
    .pt-2xl-2 { padding-top: var(--space-p-2) !important; }
    .pr-2xl-2 { padding-right: var(--space-p-2) !important; }
    .pb-2xl-2 { padding-bottom: var(--space-p-2) !important; }
    .pl-2xl-2 { padding-left: var(--space-p-2) !important; }
    .px-2xl-2 { padding-inline: var(--space-p-2) !important; }
    .py-2xl-2 { padding-block: var(--space-p-2) !important; }

    .p-2xl-3 { padding: var(--space-p-3) !important; }
    .pt-2xl-3 { padding-top: var(--space-p-3) !important; }
    .pr-2xl-3 { padding-right: var(--space-p-3) !important; }
    .pb-2xl-3 { padding-bottom: var(--space-p-3) !important; }
    .pl-2xl-3 { padding-left: var(--space-p-3) !important; }
    .px-2xl-3 { padding-inline: var(--space-p-3) !important; }
    .py-2xl-3 { padding-block: var(--space-p-3) !important; }

    .p-2xl-4 { padding: var(--space-p-4) !important; }
    .pt-2xl-4 { padding-top: var(--space-p-4) !important; }
    .pr-2xl-4 { padding-right: var(--space-p-4) !important; }
    .pb-2xl-4 { padding-bottom: var(--space-p-4) !important; }
    .pl-2xl-4 { padding-left: var(--space-p-4) !important; }
    .px-2xl-4 { padding-inline: var(--space-p-4) !important; }
    .py-2xl-4 { padding-block: var(--space-p-4) !important; }

    .p-2xl-5 { padding: var(--space-p-5) !important; }
    .pt-2xl-5 { padding-top: var(--space-p-5) !important; }
    .pr-2xl-5 { padding-right: var(--space-p-5) !important; }
    .pb-2xl-5 { padding-bottom: var(--space-p-5) !important; }
    .pl-2xl-5 { padding-left: var(--space-p-5) !important; }
    .px-2xl-5 { padding-inline: var(--space-p-5) !important; }
    .py-2xl-5 { padding-block: var(--space-p-5) !important; }
}