@media (max-width: 1280px) {
    .container,
    .container-fluid .container-inner { padding: 0 var(--space-md); }

    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
}

@media (max-width: 1024px) {
    :root { --font-size-3xl: 2.111rem; /* ~38px */ --font-size-2xl: 1.667rem; /* ~30px */ --font-size-xl: 1.444rem; /* ~26px */ --font-size-lg: 1.222rem; /* ~22px */ --font-size-base: 1rem; /* 18px  */ --font-size-sm: 0.889rem; /* ~16px */ }

    .section { padding: var(--space-2xl) 0; }
}

@media (max-width: 768px) {
    html { font-size: 19px; }
    :root { --font-size-3xl: 1.778rem; /* ~32px */ --font-size-2xl: 1.444rem; /* ~26px */ --font-size-xl: 1.222rem; /* ~22px */ --font-size-lg: 1.111rem; /* ~20px */ --font-size-base: 1rem; /* 18px  */ --font-size-sm: 0.889rem; /* ~16px */ --space-3xl: 2.5rem; --space-2xl: 2rem; }

    .container,
    .container-fluid .container-inner { padding: 0 var(--space-md); }

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

@media (max-width: 480px) {
    :root { --font-size-3xl: 1.556rem; /* ~28px */ --font-size-2xl: 1.333rem; /* ~24px */ --font-size-xl: 1.111rem; /* ~20px */ --font-size-lg: 1rem; /* 18px  */ --font-size-base: 0.889rem; /* ~16px */ --font-size-sm: 0.778rem; /* ~14px */ }

    .container,
    .container-fluid .container-inner { padding: 0 var(--space-sm); }
}

.row { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.row-gap-0 { gap: 0; }
.row-gap-sm { gap: var(--space-sm); }
.row-gap-lg { gap: var(--space-lg); }

.row.col-1 > * { width: calc((100% - 0 * var(--space-md)) / 1); }
.row.col-2 > * { width: calc((100% - 1 * var(--space-md)) / 2); }
.row.col-3 > * { width: calc((100% - 2 * var(--space-md)) / 3); }
.row.col-4 > * { width: calc((100% - 3 * var(--space-md)) / 4); }
.row.col-5 > * { width: calc((100% - 4 * var(--space-md)) / 5); }
.row.col-6 > * { width: calc((100% - 5 * var(--space-md)) / 6); }
.row.col-7 > * { width: calc((100% - 6 * var(--space-md)) / 7); }
.row.col-8 > * { width: calc((100% - 7 * var(--space-md)) / 8); }
.row.col-9 > * { width: calc((100% - 8 * var(--space-md)) / 9); }
.row.col-10 > * { width: calc((100% - 9 * var(--space-md)) / 10); }
.row.col-11 > * { width: calc((100% - 10 * var(--space-md)) / 11); }
.row.col-12 > * { width: calc((100% - 11 * var(--space-md)) / 12); }

.span-1 { width: calc(1/12 * 100% - var(--space-md)) !important; }
.span-2 { width: calc(2/12 * 100% - var(--space-md)) !important; }
.span-3 { width: calc(3/12 * 100% - var(--space-md)) !important; }
.span-4 { width: calc(4/12 * 100% - var(--space-md)) !important; }
.span-5 { width: calc(5/12 * 100% - var(--space-md)) !important; }
.span-6 { width: calc(6/12 * 100% - var(--space-md)) !important; }
.span-7 { width: calc(7/12 * 100% - var(--space-md)) !important; }
.span-8 { width: calc(8/12 * 100% - var(--space-md)) !important; }
.span-9 { width: calc(9/12 * 100% - var(--space-md)) !important; }
.span-10 { width: calc(10/12 * 100% - var(--space-md)) !important; }
.span-11 { width: calc(11/12 * 100% - var(--space-md)) !important; }
.span-12 { width: calc(12/12 * 100% - var(--space-md)) !important; }

@media (max-width: 1024px) {
    .span-md-1 { width: calc(1/12 * 100% - var(--space-md)) !important; }
    .span-md-2 { width: calc(2/12 * 100% - var(--space-md)) !important; }
    .span-md-3 { width: calc(3/12 * 100% - var(--space-md)) !important; }
    .span-md-4 { width: calc(4/12 * 100% - var(--space-md)) !important; }
    .span-md-5 { width: calc(5/12 * 100% - var(--space-md)) !important; }
    .span-md-6 { width: calc(6/12 * 100% - var(--space-md)) !important; }
    .span-md-7 { width: calc(7/12 * 100% - var(--space-md)) !important; }
    .span-md-8 { width: calc(8/12 * 100% - var(--space-md)) !important; }
    .span-md-9 { width: calc(9/12 * 100% - var(--space-md)) !important; }
    .span-md-10 { width: calc(10/12 * 100% - var(--space-md)) !important; }
    .span-md-11 { width: calc(11/12 * 100% - var(--space-md)) !important; }
    .span-md-12 { width: 100% !important; }
}

@media (max-width: 768px) {
    .span-sm-1 { width: calc(1/12 * 100% - var(--space-md)) !important; }
    .span-sm-2 { width: calc(2/12 * 100% - var(--space-md)) !important; }
    .span-sm-3 { width: calc(3/12 * 100% - var(--space-md)) !important; }
    .span-sm-4 { width: calc(4/12 * 100% - var(--space-md)) !important; }
    .span-sm-5 { width: calc(5/12 * 100% - var(--space-md)) !important; }
    .span-sm-6 { width: calc(6/12 * 100% - var(--space-md)) !important; }
    .span-sm-7 { width: calc(7/12 * 100% - var(--space-md)) !important; }
    .span-sm-8 { width: calc(8/12 * 100% - var(--space-md)) !important; }
    .span-sm-9 { width: calc(9/12 * 100% - var(--space-md)) !important; }
    .span-sm-10 { width: calc(10/12 * 100% - var(--space-md)) !important; }
    .span-sm-11 { width: calc(11/12 * 100% - var(--space-md)) !important; }
    .span-sm-12 { width: 100% !important; }
}

@media (max-width: 1024px) {
    .row.col-md-1 > * { width: 100%; }
    .row.col-md-2 > * { width: calc((100% - 1 * var(--space-md)) / 2); }
    .row.col-md-3 > * { width: calc((100% - 2 * var(--space-md)) / 3); }
    .row.col-md-4 > * { width: calc((100% - 3 * var(--space-md)) / 4); }
    .row.col-md-5 > * { width: calc((100% - 4 * var(--space-md)) / 5); }
    .row.col-md-6 > * { width: calc((100% - 5 * var(--space-md)) / 6); }

    .row[class*="col-"]:not([class*="col-md-"]) > * { width: calc((100% - var(--space-md)) / 2); }
    .row.col-1 > * { width: 100%; }
}

@media (max-width: 768px) {
    .row.col-sm-1 > * { width: 100%; }
    .row.col-sm-2 > * { width: calc((100% - 1 * var(--space-md)) / 2); }
    .row.col-sm-3 > * { width: calc((100% - 2 * var(--space-md)) / 3); }

    .row[class*="col-"]:not([class*="col-sm-"]) > * { width: 100%; }
}

@media (max-width: 480px) {
    .row[class*="col-"] > * { width: 100%; }
    .row.col-xs-2 > * { width: calc((100% - var(--space-md)) / 2); }
}

.span-eq-1 { width: calc((100% - 0 * var(--space-md)) / 1) !important; }
.span-eq-2 { width: calc((100% - 1 * var(--space-md)) / 2) !important; }
.span-eq-3 { width: calc((100% - 2 * var(--space-md)) / 3) !important; }
.span-eq-4 { width: calc((100% - 3 * var(--space-md)) / 4) !important; }
.span-eq-5 { width: calc((100% - 4 * var(--space-md)) / 5) !important; }
.span-eq-6 { width: calc((100% - 5 * var(--space-md)) / 6) !important; }
.span-eq-7 { width: calc((100% - 6 * var(--space-md)) / 7) !important; }
.span-eq-8 { width: calc((100% - 7 * var(--space-md)) / 8) !important; }
.span-eq-9 { width: calc((100% - 8 * var(--space-md)) / 9) !important; }
.span-eq-10 { width: calc((100% - 9 * var(--space-md)) / 10) !important; }
.span-eq-11 { width: calc((100% - 10 * var(--space-md)) / 11) !important; }
.span-eq-12 { width: calc((100% - 11 * var(--space-md)) / 12) !important; }