/* =====================================================
AUTO-GENERATED DESIGN SYSTEM CSS
Source: Figma Tokens (1440 mode)
DO NOT EDIT MANUALLY
===================================================== */

:root {
    --text-regular-eyebrow-gap: 8px;
    --text-regular-heading-gap: 24px;
    --text-regular-paragraph-gap: 16px;
    --text-regular-list-item-gap: 12px;
    --text-regular-list-block-gap: 24px;
    --text-regular-quote-gap: 32px;

    --text-compact-eyebrow-gap: 4px;
    --text-compact-heading-gap: 16px !important;
    --text-compact-paragraph-gap: 12px !important;
    --text-compact-list-item-gap: 8px;
    --text-compact-list-block-gap: 16px;
    --text-compact-quote-gap: 24px;

    --text-spacious-eyebrow-gap: 16px !important;
    --text-spacious-heading-gap: 32px;
    --text-spacious-paragraph-gap: 20px !important;
    --text-spacious-list-item-gap: 16px;
    --text-spacious-list-block-gap: 32px;
    --text-spacious-quote-gap: 48px !important;

    --stack-regular-block-gap: 32px !important;
    --stack-regular-group-gap: 24px;
    --stack-regular-item-gap: 12px;
    --stack-regular-action-gap: 24px;

    --stack-compact-block-gap: 24px;
    --stack-compact-group-gap: 16px;
    --stack-compact-item-gap: 8px;
    --stack-compact-action-gap: 16px;

    --stack-spacious-block-gap: 48px !important;
    --stack-spacious-group-gap: 32px !important;
    --stack-compact-group-gap: 32px !important;
    --stack-spacious-item-gap: 16px;
    --stack-spacious-action-gap: 32px !important;

    --inline-regular-inline-item-gap: 12px;
    --inline-regular-icon-text-gap: 8px;

    --inline-compact-inline-item-gap: 8px;
    --inline-compact-icon-text-gap: 6px;

    --inline-spacious-inline-item-gap: 16px;
    --inline-spacious-icon-text-gap: 12px;

    --layout-regular-section-padding-x: 24px;
    --layout-regular-section-top-padding-y: 110px !important;

    --layout-regular-2-column-gap: 80px;

    --layout-regular-grid-column-gap: 24px;
    --layout-regular-grid-row-gap: 32px;

    --layout-regular-section-padding: 80px;
    --layout-compact-section-padding-x: 16px;
    --layout-compact-section-padding-y: 32px;
    --layout-section-padding-y: 110px !important;
    --layout-section-top-padding-y: 110px !important;

    --layout-compact-2-column-gap: 48px;

    --layout-compact-grid-column-gap: 24px;
    --layout-compact-grid-row-gap: 24px;
    --layout-spacious-section-padding-x: 32px;
    --layout-spacious-section-padding-y: 80px;
    --layout-spacious-2-column-gap: 100px;
    --layout-spacious-grid-column-gap: 32px;
    --layout-spacious-grid-row-gap: 48px;

    --component-card-regular-padding-x: 24px;
    --component-card-regular-padding-y: 24px;
    --component-card-regular-item-gap: 12px;
    --component-card-regular-group-gap: 24px;
    --component-card-regular-action-gap: 24px;

    --component-card-compact-padding-x: 16px;
    --component-card-compact-padding-y: 16px;
    --component-card-compact-item-gap: 8px;
    --component-card-compact-group-gap: 16px;
    --component-card-compact-action-gap: 16px;

    --component-card-spacious-padding-x: 32px;
    --component-card-spacious-padding-y: 32px;
    --component-card-spacious-item-gap: 16px;
    --component-card-spacious-group-gap: 32px;
    --component-card-spacious-action-gap: 32px;

    --component-list-regular-padding-x: 24px;
    --component-list-regular-padding-y: 16px;
    --component-list-regular-item-gap: 24px;
    --component-list-regular-item-inner-gap: 12px;

    --component-list-compact-padding-x: 16px;
    --component-list-compact-padding-y: 12px;
    --component-list-compact-item-gap: 16px;
    --component-list-compact-item-inner-gap: 8px;

    --component-form-regular-section-gap: 12px;
    --component-form-regular-group-gap: 24px;
    --component-form-regular-field-gap: 12px;
    --component-form-regular-action-gap: 24px;

    --component-form-compact-section-gap: 24px;
    --component-form-compact-group-gap: 16px;
    --component-form-compact-field-gap: 8px;
    --component-form-compact-action-gap: 16px;

    --component-button-regular-padding-x: 16px;
    --component-button-regular-padding-y: 8px;
    --component-button-regular-icon-gap: 8px;
    --component-button-regular-group-gap: 16px;

    --component-button-compact-padding-x: 12px;
    --component-button-compact-padding-y: 6px;
    --component-button-compact-icon-gap: 6px;
    --component-button-compact-group-gap: 12px;

    --component-button-spacious-padding-x: 20px;
}

.text-regular-eyebrow-gap {
    row-gap: var(--text-regular-eyebrow-gap);
}

.text-regular-heading-gap {
    gap: var(--text-regular-heading-gap);
}

.text-regular-paragraph-gap {
    gap: var(--text-regular-paragraph-gap);
}

.text-regular-list-item-gap {
    gap: var(--text-regular-list-item-gap);
}

.text-regular-list-block-gap {
    gap: var(--text-regular-list-block-gap);
}

.text-regular-quote-gap {
    gap: var(--text-regular-quote-gap);
}

.text-compact-eyebrow-gap {
    row-gap: var(--text-compact-eyebrow-gap);
}

.text-compact-heading-gap {
    margin-top: var(--text-compact-heading-gap) !important;
}

.text-compact-paragraph-gap {
    margin-bottom: var(--text-compact-paragraph-gap) !important;
}

.text-compact-list-item-gap {
    gap: var(--text-compact-list-item-gap);
}

.text-compact-list-block-gap {
    gap: var(--text-compact-list-block-gap);
}

.text-compact-quote-gap {
    gap: var(--text-compact-quote-gap);
}

.text-spacious-eyebrow-gap {
    margin-top: var(--text-spacious-eyebrow-gap) !important;
}

.text-spacious-heading-gap {
    gap: var(--text-spacious-heading-gap);
}

.text-spacious-paragraph-gap {
    margin-top: var(--text-spacious-paragraph-gap) !important;
}

.text-spacious-list-item-gap {
    gap: var(--text-spacious-list-item-gap);
}

.text-spacious-list-block-gap {
    gap: var(--text-spacious-list-block-gap);
}

.text-spacious-quote-gap {
    padding-bottom: var(--text-spacious-quote-gap) !important;
}

.stack-regular-block-gap {
    margin-top: var(--stack-regular-block-gap) !important;
}

.stack-regular-group-gap {
    margin-top: var(--stack-regular-group-gap);
}

.stack-regular-item-gap {
    gap: var(--stack-regular-item-gap);
}

.stack-regular-action-gap {
    margin-top: var(--stack-regular-action-gap) !important;
}

.stack-compact-block-gap {
    gap: var(--stack-compact-block-gap);
}

.stack-compact-group-gap {
    margin-top: var(--stack-compact-group-gap) !important;
}

.stack-compact-item-gap {
    gap: var(--stack-compact-item-gap);
}

.stack-compact-action-gap {
    gap: var(--stack-compact-action-gap);
}

.stack-spacious-block-gap {
    margin-top: var(--stack-spacious-block-gap) !important;
}

.stack-spacious-group-gap {
    margin-top: var(--stack-spacious-group-gap) !important;
}

.stack-spacious-item-gap {
    gap: var(--stack-spacious-item-gap);
}

.stack-spacious-action-gap {
    margin-top: var(--stack-spacious-action-gap) !important;
}

.inline-regular-inline-item-gap {
    gap: var(--inline-regular-inline-item-gap) !important;
}

.inline-regular-icon-text-gap {
    gap: var(--inline-regular-icon-text-gap);
}

.inline-compact-inline-item-gap {
    gap: var(--inline-compact-inline-item-gap);
}

.inline-compact-icon-text-gap {
    gap: var(--inline-compact-icon-text-gap);
}

.inline-spacious-inline-item-gap {
    gap: var(--inline-spacious-inline-item-gap);
}

.inline-spacious-icon-text-gap {
    gap: var(--inline-spacious-icon-text-gap);
}

.layout-regular-section-padding-x {
    padding-inline: var(--layout-regular-section-padding-x);
}

.layout-regular-section-padding-y {
    padding-block: var(--layout-regular-section-padding-y) !important;
}

.layout-regular-2-column-gap {
    column-gap: var(--layout-regular-2-column-gap);
}

.layout-regular-grid-column-gap {
    column-gap: var(--layout-regular-grid-column-gap);
}

.layout-regular-grid-row-gap {
    row-gap: var(--layout-regular-grid-row-gap);
}

.layout-regular-section-padding {
    padding-block: var(--layout-regular-section-padding) !important;
}

.layout-compact-section-padding-x {
    padding-inline: var(--layout-compact-section-padding-x);
}

.layout-compact-section-padding-y {
    padding-block: var(--layout-compact-section-padding-y) !important;
}

.layout-section-padding-y {
    padding-block: var(--layout-section-padding-y) !important;
}

.layout-section-top-padding-y {
    margin-top: var(--layout-section-top-padding-y) !important;
}
.layout-regular-section-top-padding-y{
	padding-top: var(--layout-regular-section-top-padding-y) !important;
}

.layout-compact-2-column-gap {
    column-gap: var(--layout-compact-2-column-gap);
}

.layout-compact-grid-column-gap {
    column-gap: var(--layout-compact-grid-column-gap) !important;
}

.layout-compact-grid-row-gap {
    row-gap: var(--layout-compact-grid-row-gap) !important;
}

.layout-spacious-section-padding-x {
    padding-inline: var(--layout-spacious-section-padding-x);
}

.layout-spacious-section-padding-y {
    padding-block: var(--layout-spacious-section-padding-y);
}

.layout-spacious-2-column-gap {
    column-gap: var(--layout-spacious-2-column-gap);
}

.layout-spacious-grid-column-gap {
    column-gap: var(--layout-spacious-grid-column-gap);
}

.layout-spacious-grid-row-gap {
    row-gap: var(--layout-spacious-grid-row-gap);
}

.component-card-regular-padding-x {
    padding-inline: var(--component-card-regular-padding-x);
}

.component-card-regular-padding-y {
    padding-block: var(--component-card-regular-padding-y);
}

.component-card-regular-item-gap {
    gap: var(--component-card-regular-item-gap);
}

.component-card-regular-group-gap {
    gap: var(--component-card-regular-group-gap);
}

.component-card-regular-action-gap {
    gap: var(--component-card-regular-action-gap);
}

.component-card-compact-padding-x {
    padding-inline: var(--component-card-compact-padding-x);
}

.component-card-compact-padding-y {
    padding-block: var(--component-card-compact-padding-y);
}

.component-card-compact-item-gap {
    gap: var(--component-card-compact-item-gap);
}

.component-card-compact-group-gap {
    gap: var(--component-card-compact-group-gap);
}

.component-card-compact-action-gap {
    gap: var(--component-card-compact-action-gap);
}

.component-card-spacious-padding-x {
    padding-inline: var(--component-card-spacious-padding-x);
}

.component-card-spacious-padding-y {
    padding-block: var(--component-card-spacious-padding-y);
}

.component-card-spacious-item-gap {
    gap: var(--component-card-spacious-item-gap);
}

.component-card-spacious-group-gap {
    gap: var(--component-card-spacious-group-gap);
}

.component-card-spacious-action-gap {
    gap: var(--component-card-spacious-action-gap);
}

.component-list-regular-padding-x {
    padding-inline: var(--component-list-regular-padding-x);
}

.component-list-regular-padding-y {
    padding-block: var(--component-list-regular-padding-y);
}

.component-list-regular-item-gap {
    gap: var(--component-list-regular-item-gap);
}

.component-list-regular-item-inner-gap {
    gap: var(--component-list-regular-item-inner-gap);
}

.component-list-compact-padding-x {
    padding-inline: var(--component-list-compact-padding-x);
}

.component-list-compact-padding-y {
    padding-block: var(--component-list-compact-padding-y);
}

.component-list-compact-item-gap {
    gap: var(--component-list-compact-item-gap);
}

.component-list-compact-item-inner-gap {
    gap: var(--component-list-compact-item-inner-gap);
}

.component-form-regular-section-gap {
    gap: var(--component-form-regular-section-gap);
}

.component-form-regular-group-gap {
    gap: var(--component-form-regular-group-gap);
}

.component-form-regular-field-gap {
    gap: var(--component-form-regular-field-gap);
}

.component-form-regular-action-gap {
    gap: var(--component-form-regular-action-gap);
}

.component-form-compact-section-gap {
    gap: var(--component-form-compact-section-gap);
}

.component-form-compact-group-gap {
    gap: var(--component-form-compact-group-gap);
}

.component-form-compact-field-gap {
    gap: var(--component-form-compact-field-gap);
}

.component-form-compact-action-gap {
    gap: var(--component-form-compact-action-gap);
}

.component-button-regular-padding-x {
    padding-inline: var(--component-button-regular-padding-x);
}

.component-button-regular-padding-y {
    padding-block: var(--component-button-regular-padding-y);
}

.component-button-regular-icon-gap {
    gap: var(--component-button-regular-icon-gap);
}

.component-button-regular-group-gap {
    gap: var(--component-button-regular-group-gap);
}

.component-button-compact-padding-x {
    padding-inline: var(--component-button-compact-padding-x);
}

.component-button-compact-padding-y {
    padding-block: var(--component-button-compact-padding-y);
}

.component-button-compact-icon-gap {
    gap: var(--component-button-compact-icon-gap);
}

.component-button-compact-group-gap {
    gap: var(--component-button-compact-group-gap);
}

.component-button-spacious-padding-x {
    padding-inline: var(--component-button-spacious-padding-x);
}

@media only screen and (max-width: 1366px) {

    :root {

        /* ================= LAYOUT ================= */
        --layout-compact-grid-row-gap: 20px;

        --layout-regular-section-padding-x: 20px;
        --layout-regular-section-padding-y: 90px;
        --layout-regular-2-column-gap: 64px;
        --layout-regular-grid-column-gap: 22px;
        --layout-regular-grid-row-gap: 22px;
        --layout-section-padding-y: 80px !important;
        --layout-section-top-padding-y: 80px !important;
		--layout-regular-section-top-padding-y:80px !important;
        --text-spacious-quote-gap: 40px !important;

        /* ================= STACK ================= */
        --stack-regular-block-gap: 28px !important;
        --stack-regular-group-gap: 20px;
        --stack-regular-item-gap: 10px;
        --stack-regular-action-gap: 20px;
        --stack-spacious-block-gap: 40px !important;
        --stack-spacious-group-gap: 30px;
        --stack-compact-group-gap: 30px !important;

        /* ================= TEXT ================= */
        --text-compact-heading-gap: 14px;

        --text-regular-eyebrow-gap: 7px;
        --text-regular-heading-gap: 22px;
        --text-regular-paragraph-gap: 15px;
        --text-regular-list-item-gap: 11px;
        --text-regular-list-block-gap: 22px;
        --text-regular-quote-gap: 30px;

        /* ================= INLINE ================= */
        --inline-regular-inline-item-gap: 11px;
        --inline-regular-icon-text-gap: 7px;

        /* ================= CARD ================= */
        --component-card-regular-padding-x: 24px;
        --component-card-regular-padding-y: 22px;
        --component-card-regular-item-gap: 11px;
        --component-card-regular-group-gap: 22px;
        --component-card-regular-action-gap: 22px;

        /* ================= LIST ================= */
        --component-list-regular-padding-x: 22px;
        --component-list-regular-padding-y: 15px;
        --component-list-regular-item-gap: 22px;
        --component-list-regular-item-inner-gap: 11px;

        /* ================= FORM ================= */
        --component-form-regular-section-gap: 11px;
        --component-form-regular-group-gap: 22px;
        --component-form-regular-field-gap: 11px;
        --component-form-regular-action-gap: 22px;

        /* ================= BUTTON ================= */
        --component-button-regular-padding-x: 15px;
        --component-button-regular-padding-y: 7px;
        --component-button-regular-icon-gap: 7px;
        --component-button-regular-group-gap: 15px;
    }
}

@media only screen and (max-width: 1199px) {

    :root {

        /* ================= LAYOUT ================= */
        --layout-compact-grid-row-gap: 16px;

        --layout-regular-section-padding-x: 18px;
        --layout-regular-section-padding-y: 70px;
        --layout-regular-2-column-gap: 56px;
        --layout-regular-grid-column-gap: 20px;
        --layout-regular-grid-row-gap: 20px;
        --layout-section-padding-y: 70px !important;
        --layout-section-top-padding-y: 70px !important;
		--layout-regular-section-top-padding-y:70px !important;
        --text-spacious-quote-gap: 35px !important;

        /* ================= STACK ================= */
        --stack-regular-block-gap: 26px !important;
        --stack-regular-group-gap: 18px;
        --stack-regular-item-gap: 9px;
        --stack-regular-action-gap: 18px;
        --stack-spacious-block-gap: 35px !important;
        --stack-spacious-group-gap: 28px !important;
        --stack-compact-group-gap: 28px !important;
        --stack-spacious-action-gap: 30px !important;
        /* ================= TEXT ================= */
        --text-compact-heading-gap: 12px;

        --text-regular-eyebrow-gap: 6px;
        --text-regular-heading-gap: 20px;
        --text-regular-paragraph-gap: 14px;
        --text-regular-list-item-gap: 10px;
        --text-regular-list-block-gap: 20px;
        --text-regular-quote-gap: 28px;

        /* ================= INLINE ================= */
        --inline-regular-inline-item-gap: 10px;
        --inline-regular-icon-text-gap: 7px;

        /* ================= CARD ================= */
        --component-card-regular-padding-x: 22px;
        --component-card-regular-padding-y: 20px;
        --component-card-regular-item-gap: 10px;
        --component-card-regular-group-gap: 20px;
        --component-card-regular-action-gap: 20px;

        /* ================= LIST ================= */
        --component-list-regular-padding-x: 20px;
        --component-list-regular-padding-y: 14px;
        --component-list-regular-item-gap: 20px;
        --component-list-regular-item-inner-gap: 10px;

        /* ================= FORM ================= */
        --component-form-regular-section-gap: 10px;
        --component-form-regular-group-gap: 20px;
        --component-form-regular-field-gap: 10px;
        --component-form-regular-action-gap: 20px;

        /* ================= BUTTON ================= */
        --component-button-regular-padding-x: 14px;
        --component-button-regular-padding-y: 7px;
        --component-button-regular-icon-gap: 7px;
        --component-button-regular-group-gap: 14px;
    }
}

@media only screen and (max-width: 1024px) {

    :root {

        /* ================= LAYOUT ================= */
        --layout-compact-grid-row-gap: 14px;

        --layout-regular-section-padding-x: 16px;
        --layout-regular-section-padding-y: 60px;
        --layout-regular-2-column-gap: 48px;
        --layout-regular-grid-column-gap: 18px;
        --layout-regular-grid-row-gap: 18px;
        --layout-section-padding-y: 60px !important;
        --layout-section-top-padding-y: 60px !important;
		--layout-regular-section-top-padding-y:60px !important;
        --text-spacious-quote-gap: 30px !important;

        /* ================= STACK ================= */
        --stack-regular-block-gap: 24px !important;
        --stack-regular-group-gap: 16px;
        --stack-regular-item-gap: 8px;
        --stack-regular-action-gap: 16px;
        --stack-spacious-block-gap: 30px !important;
        --stack-spacious-group-gap: 26px !important;
        --stack-compact-group-gap: 26px !important;
        --stack-spacious-action-gap: 25px !important;

        /* ================= TEXT ================= */
        --text-compact-heading-gap: 10px;

        --text-regular-eyebrow-gap: 6px;
        --text-regular-heading-gap: 18px;
        --text-regular-paragraph-gap: 13px;
        --text-regular-list-item-gap: 10px;
        --text-regular-list-block-gap: 20px;
        --text-regular-quote-gap: 26px;

        /* ================= INLINE ================= */
        --inline-regular-inline-item-gap: 10px;
        --inline-regular-icon-text-gap: 6px;

        /* ================= CARD ================= */
        --component-card-regular-padding-x: 20px;
        --component-card-regular-padding-y: 20px;
        --component-card-regular-item-gap: 10px;
        --component-card-regular-group-gap: 20px;
        --component-card-regular-action-gap: 20px;

        /* ================= LIST ================= */
        --component-list-regular-padding-x: 20px;
        --component-list-regular-padding-y: 14px;
        --component-list-regular-item-gap: 20px;
        --component-list-regular-item-inner-gap: 10px;

        /* ================= FORM ================= */
        --component-form-regular-section-gap: 10px;
        --component-form-regular-group-gap: 20px;
        --component-form-regular-field-gap: 10px;
        --component-form-regular-action-gap: 20px;

        /* ================= BUTTON ================= */
        --component-button-regular-padding-x: 14px;
        --component-button-regular-padding-y: 7px;
        --component-button-regular-icon-gap: 6px;
        --component-button-regular-group-gap: 14px;

    }
}

@media only screen and (max-width: 767px) {

    :root {

        /* ================= LAYOUT ================= */

        --layout-compact-grid-row-gap: 12px;

        --layout-regular-section-padding-x: 16px;
        --layout-regular-section-padding-y: 50px;
        --layout-regular-2-column-gap: 40px;
        --layout-regular-grid-column-gap: 16px;
        --layout-regular-grid-row-gap: 16px;
        --layout-section-padding-y: 50px !important;
        --layout-section-top-padding-y: 50px !important;
		--layout-regular-section-top-padding-y:50px !important;
        --text-spacious-quote-gap: 25px !important;

        /* ================= STACK ================= */
        --stack-regular-block-gap: 20px !important;
        --stack-regular-group-gap: 14px;
        --stack-regular-item-gap: 8px;
        --stack-regular-action-gap: 14px;
        --stack-spacious-block-gap: 25px !important;
        --stack-spacious-group-gap: 20px !important;
        --stack-compact-group-gap: 20px !important;
        --stack-spacious-action-gap: 20px !important;

        /* ================= TEXT ================= */
        --text-compact-heading-gap: 8px;

        --text-regular-eyebrow-gap: 6px;
        --text-regular-heading-gap: 16px;
        --text-regular-paragraph-gap: 12px;
        --text-regular-list-item-gap: 10px;
        --text-regular-list-block-gap: 20px;
        --text-regular-quote-gap: 28px;

        /* ================= INLINE ================= */
        --inline-regular-inline-item-gap: 8px;
        --inline-regular-icon-text-gap: 6px;

        /* ================= CARD ================= */
        --component-card-regular-padding-x: 16px;
        --component-card-regular-padding-y: 16px;
        --component-card-regular-item-gap: 8px;
        --component-card-regular-group-gap: 16px;
        --component-card-regular-action-gap: 16px;

        /* ================= LIST ================= */
        --component-list-regular-padding-x: 16px;
        --component-list-regular-padding-y: 12px;
        --component-list-regular-item-gap: 16px;
        --component-list-regular-item-inner-gap: 8px;

        /* ================= FORM ================= */
        --component-form-regular-section-gap: 10px;
        --component-form-regular-group-gap: 16px;
        --component-form-regular-field-gap: 8px;
        --component-form-regular-action-gap: 16px;

        /* ================= BUTTON ================= */
        --component-button-regular-padding-x: 14px;
        --component-button-regular-padding-y: 6px;
        --component-button-regular-icon-gap: 6px;
        --component-button-regular-group-gap: 12px;

    }
}

@media only screen and (max-width: 479px) {

    :root {

        /* ================= LAYOUT ================= */
        --layout-regular-section-padding-x: 14px;
        --layout-regular-section-padding-y: 50px;
        --layout-regular-2-column-gap: 32px;
        --layout-regular-grid-column-gap: 14px;
        --layout-regular-grid-row-gap: 22px;
        --layout-section-padding-y: 40px !important;
        --layout-section-top-padding-y: 40px !important;
		--layout-regular-section-top-padding-y:40px !important;

        /* ================= STACK ================= */
        --stack-regular-block-gap: 16px !important;
        --stack-regular-group-gap: 12px;
        --stack-regular-item-gap: 6px;
        --stack-regular-action-gap: 12px;

        /* ================= TEXT ================= */
        --text-regular-eyebrow-gap: 5px;
        --text-regular-heading-gap: 14px;
        --text-regular-paragraph-gap: 10px;
        --text-regular-list-item-gap: 8px;
        --text-regular-list-block-gap: 16px;
        --text-regular-quote-gap: 24px;

        /* ================= INLINE ================= */
        --inline-regular-inline-item-gap: 6px;
        --inline-regular-icon-text-gap: 5px;

        /* ================= CARD ================= */
        --component-card-regular-padding-x: 14px;
        --component-card-regular-padding-y: 14px;
        --component-card-regular-item-gap: 6px;
        --component-card-regular-group-gap: 12px;
        --component-card-regular-action-gap: 12px;

        /* ================= LIST ================= */
        --component-list-regular-padding-x: 14px;
        --component-list-regular-padding-y: 10px;
        --component-list-regular-item-gap: 14px;
        --component-list-regular-item-inner-gap: 6px;

        /* ================= FORM ================= */
        --component-form-regular-section-gap: 8px;
        --component-form-regular-group-gap: 14px;
        --component-form-regular-field-gap: 6px;
        --component-form-regular-action-gap: 14px;

        /* ================= BUTTON ================= */
        --component-button-regular-padding-x: 12px;
        --component-button-regular-padding-y: 6px;
        --component-button-regular-icon-gap: 5px;
        --component-button-regular-group-gap: 10px;

    }
}

@media only screen and (max-width: 374px) {

    :root {

        /* ================= LAYOUT ================= */
        --layout-regular-section-padding-x: 12px;
        --layout-regular-section-padding-y: 50px;
        --layout-regular-2-column-gap: 28px;
        --layout-regular-grid-column-gap: 12px;
        --layout-regular-grid-row-gap: 20px;

        /* ================= STACK ================= */
        --stack-regular-block-gap: 14px !important;
        --stack-regular-group-gap: 10px;
        --stack-regular-item-gap: 6px;
        --stack-regular-action-gap: 10px;

        /* ================= TEXT ================= */
        --text-regular-eyebrow-gap: 4px;
        --text-regular-heading-gap: 12px;
        --text-regular-paragraph-gap: 8px;
        --text-regular-list-item-gap: 6px;
        --text-regular-list-block-gap: 14px;
        --text-regular-quote-gap: 20px;

        /* ================= INLINE ================= */
        --inline-regular-inline-item-gap: 6px;
        --inline-regular-icon-text-gap: 4px;

        /* ================= CARD ================= */
        --component-card-regular-padding-x: 12px;
        --component-card-regular-padding-y: 12px;
        --component-card-regular-item-gap: 6px;
        --component-card-regular-group-gap: 10px;
        --component-card-regular-action-gap: 10px;

        /* ================= LIST ================= */
        --component-list-regular-padding-x: 12px;
        --component-list-regular-padding-y: 10px;
        --component-list-regular-item-gap: 12px;
        --component-list-regular-item-inner-gap: 6px;

        /* ================= FORM ================= */
        --component-form-regular-section-gap: 8px;
        --component-form-regular-group-gap: 12px;
        --component-form-regular-field-gap: 6px;
        --component-form-regular-action-gap: 12px;

        /* ================= BUTTON ================= */
        --component-button-regular-padding-x: 12px;
        --component-button-regular-padding-y: 6px;
        --component-button-regular-icon-gap: 4px;
        --component-button-regular-group-gap: 10px;

    }
}