@import url(../base/primitive.css);

:root {
    --text-font-size-headline-100: var(--font-size-700);
    --text-font-size-headline-200: var(--font-size-600);
    --text-font-size-headline-300: var(--font-size-500);
    --text-font-size-headline-400: var(--font-size-400);
    --text-font-size-headline-500: var(--font-size-300);
    --text-font-size-paragraph-100: var(--font-size-300);
    --text-font-size-paragraph-200: var(--font-size-200);
    --text-font-size-paragraph-300: var(--font-size-100);
    --text-font-size-paragraph-400: var(--font-size-100);
    --text-font-line-height-100: var(--font-line-height-700);
    --text-font-line-height-200: var(--font-line-height-600);
    --text-font-line-height-300: var(--font-line-height-500);
    --text-font-line-height-400: var(--font-line-height-400);
    --text-font-line-height-500: var(--font-line-height-300);
    --text-font-line-height-600: var(--font-line-height-300);
    --text-font-line-height-700: var(--font-line-height-200);
    --text-font-line-height-800: var(--font-line-height-100);
    --text-font-line-height-900: var(--font-line-height-100);
    --text-font-size-button-100: var(--font-size-button-50);
    --text-font-size-label-100: var(--font-size-label-400);
    --text-font-size-label-200: var(--font-size-label-300);
    --text-font-size-label-300: var(--font-size-label-200);
    --text-font-size-label-400: var(--font-size-label-100);
    --text-font-letter-spacing-loose: var(--font-letter-spacing-100);
    --text-font-letter-spacing-default: var(--font-letter-spacing-200);
    --text-font-letter-spacing-tight: var(--font-letter-spacing-300);
    --text-font-size-button-200: var(--font-size-button-50);
    --text-font-size-tab-100: var(--font-size-tab-200);
    --text-font-size-tab-200: var(--font-size-tab-200);
    --text-font-size-tab-300: var(--font-size-tab-100);
    --text-font-size-caption-100: var(--font-size-caption-200);
    --text-font-size-caption-200: var(--font-size-caption-100);
    --text-font-size-caption-300: var(--font-size-caption-100);
}
.gap-sm-none {
    gap: var(--spacing-none) !important;
}

.gap-sm-xxsmall {
    gap: var(--spacing-xxsmall) !important;
}

.gap-sm-xsmall {
    gap: var(--spacing-xsmall) !important;
}

.gap-sm-small {
    gap: var(--spacing-small) !important;
}

.gap-sm-base {
    gap: var(--spacing-base) !important;
}

.gap-sm-large {
    gap: var(--spacing-large) !important;
}

.gap-sm-xlarge {
    gap: var(--spacing-xlarge) !important;
}

.gap-sm-xxlarge {
    gap: var(--spacing-xxlarge) !important;
}

.breakpoint-sm-xxlarge {
    max-width: var(--breakpoint-xxlarge) !important;
}

.breakpoint-sm-xlarge {
    max-width: var(--breakpoint-xlarge) !important;
}

.breakpoint-sm-large {
    max-width: var(--breakpoint-large) !important;
}

.breakpoint-sm-medium {
    max-width: var(--breakpoint-medium) !important;
}

.breakpoint-sm-small {
    max-width: var(--breakpoint-small) !important;
}

.breakpoint-sm-xsmall {
    width: var(--breakpoint-xsmall) !important;
}
.position-center-mobile {
    text-align: center !important;
}

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

.position-right-mobile {
    text-align: right !important;
}
/* Center Clipped */
.mobile-center-clipped .hero-banner-right-content {
    clip-path: polygon(28% 0%, 100% 0%, 100% 100%, 0% 100%);
}
/* Bottom Clipped */
.mobile-bottom-clipped {
    clip-path: polygon(0 0%, 100% 0%, 100% 85%, 0% 100%);
}
/* Top Clipped */
.mobile-top-clipped {
    clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
}
/* Top and Bottom Clipped */
.mobile-top-clipped .mobile-bottom-clipped {
    clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
}
/* Spacing */
.spacing-sm-none {
    padding: 0px !important;
}
.spacing-sm-none-t {
    padding-top: 0px !important;
}
.spacing-sm-none-b {
    padding-bottom: 0px !important;
}
.spacing-sm-none-l {
    padding-left: 0px !important;
}
.spacing-sm-none-r {
    padding-right: 0px !important;
}

.spacing-sm-xxsmall {
    padding: var(--spacing-xxsmall) !important;
}

.spacing-sm-xxsmall-t {
    padding-top: var(--spacing-xxsmall) !important;
}

.spacing-sm-xxsmall-r {
    padding-right: var(--spacing-xxsmall) !important;
}

.spacing-sm-xxsmall-b {
    padding-bottom: var(--spacing-xxsmall) !important;
}

.spacing-sm-xxsmall-l {
    padding-left: var(--spacing-xxsmall) !important;
}

.spacing-sm-xsmall {
    padding: var(--spacing-xsmall) !important;
}

.spacing-sm-xsmall-t {
    padding-top: var(--spacing-xsmall) !important;
}

.spacing-sm-xsmall-r {
    padding-right: var(--spacing-xsmall) !important;
}

.spacing-sm-xsmall-b {
    padding-bottom: var(--spacing-xsmall) !important;
}

.spacing-sm-xsmall-l {
    padding-left: var(--spacing-xsmall) !important;
}

.spacing-sm-small {
    padding: var(--spacing-small) !important;
}

.spacing-sm-small-t {
    padding-top: var(--spacing-small) !important;
}

.spacing-sm-small-r {
    padding-right: var(--spacing-small) !important;
}

.spacing-sm-small-b {
    padding-bottom: var(--spacing-small) !important;
}

.spacing-sm-small-l {
    padding-left: var(--spacing-small) !important;
}

.spacing-sm-base {
    padding: var(--spacing-base) !important;
}

.spacing-sm-base-t {
    padding-top: var(--spacing-base) !important;
}

.spacing-sm-base-r {
    padding-right: var(--spacing-base) !important;
}

.spacing-sm-base-b {
    padding-bottom: var(--spacing-base) !important;
}

.spacing-sm-base-l {
    padding-left: var(--spacing-base) !important;
}

.spacing-sm-large {
    padding: var(--spacing-large) !important;
}

.spacing-sm-large-t {
    padding-top: var(--spacing-large) !important;
}

.spacing-sm-large-r {
    padding-right: var(--spacing-large) !important;
}

.spacing-sm-large-b {
    padding-bottom: var(--spacing-large) !important;
}

.spacing-sm-large-l {
    padding-left: var(--spacing-large) !important;
}

.spacing-sm-xlarge {
    padding: var(--spacing-xlarge) !important;
}

.spacing-sm-xlarge-t {
    padding-top: var(--spacing-xlarge) !important;
}

.spacing-sm-xlarge-r {
    padding-right: var(--spacing-xlarge) !important;
}

.spacing-sm-xlarge-b {
    padding-bottom: var(--spacing-xlarge) !important;
}

.spacing-sm-xlarge-l {
    padding-left: var(--spacing-xlarge) !important;
}

.spacing-sm-xxlarge {
    padding: var(--spacing-xxlarge) !important;
}

.spacing-sm-xxlarge-t {
    padding-top: var(--spacing-xxlarge) !important;
}

.spacing-sm-xxlarge-r {
    padding-right: var(--spacing-xxlarge) !important;
}

.spacing-sm-xxlarge-b {
    padding-bottom: var(--spacing-xxlarge) !important;
}

.spacing-sm-xxlarge-l {
    padding-left: var(--spacing-xxlarge) !important;
}