.gap {
    --responsive-gap-x: var(--responsive-gap);
    --responsive-gap-y: var(--responsive-gap);
}

.gap-x {
    --responsive-gap-x: var(--responsive-gap);
}

.gap-y {
    --responsive-gap-y: var(--responsive-gap);
}

.gap-0 { --responsive-gap: 0px; }
.gap-2 { --responsive-gap: 2px; }
.gap-5 { --responsive-gap: 5px; }
.gap-10 { --responsive-gap: 10px; }
.gap-15 { --responsive-gap: 15px; }
.gap-20 { --responsive-gap: 20px; }

.hide,
.standard-show,
.large-desktop-show,
.small-desktop-show,
.tablet-show,
.mobile-show,
.small-mobile-show {
    display: none !important;
}

.show,
html:not([data-size]) .standard-show,
html[data-size="standard"] .standard-show,
html[data-size="large-desktop"] .standard-show,
html[data-size="large-desktop"] .large-desktop-show,
html[data-size="small-desktop"] .small-desktop-show,
html[data-size="tablet"] .tablet-show,
html[data-size="mobile"] .mobile-show,
html[data-size="small-mobile"] .mobile-show,
html[data-size="small-mobile"] .small-mobile-show {
    display: var(--responsive-display, revert) !important;
}

html:not([data-size]) .standard-hide,
html[data-size="standard"] .standard-hide,
html[data-size="large-desktop"] .standard-hide,
html[data-size="large-desktop"] .large-desktop-hide,
html[data-size="small-desktop"] .small-desktop-hide,
html[data-size="tablet"] .tablet-hide,
html[data-size="mobile"] .mobile-hide,
html[data-size="small-mobile"] .mobile-hide,
html[data-size="small-mobile"] .small-mobile-hide {
    display: none !important;
}