*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --min-screen-width: 320px;
    --max-screen-width: 1400px;
    --black: rgb(15, 15, 15);
    --white: rgb(255, 255, 255);
    --light-grey: hsl(240, 4%, 95%);
    --text: hsla(222, 0%, 100%, 1);
    --space-4xs: clamp(0.49rem, calc(0vw + 0.49rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);
    --text-xs: clamp(1.01rem, calc(0vw + 1.01rem), 1.01rem);
    --text-s: clamp(1.35rem, calc(0vw + 1.35rem), 1.35rem);
    --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
    --text-l: clamp(1.8rem, calc(0.55vw + 1.62rem), 2.4rem);
    --text-xl: clamp(2.02rem, calc(1.09vw + 1.68rem), 3.2rem);
    --text-2xl: clamp(2.28rem, calc(1.84vw + 1.69rem), 4.26rem);
    --text-3xl: clamp(2.56rem, calc(2.89vw + 1.64rem), 5.68rem);
    --text-4xl: clamp(2.88rem, calc(4.34vw + 1.49rem), 7.58rem);
    --columns-1: repeat(1, minmax(0, 1fr));
    --columns-2: repeat(2, minmax(0, 1fr));
    --columns-3: repeat(3, minmax(0, 1fr));
    --columns-4: repeat(4, minmax(0, 1fr));
    --columns-5: repeat(5, minmax(0, 1fr));
    --columns-6: repeat(6, minmax(0, 1fr));
    --columns-7: repeat(7, minmax(0, 1fr));
    --columns-8: repeat(8, minmax(0, 1fr));
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
    --radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
    --radius-full: 999rem;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}

html {
    font-size: 62.5%;
}

@font-face {
    font-family: "Kapakana";
    src:
        url("../assets/fonts/kapakana-regular.woff") format("woff");
}

@font-face {
    font-family: "Made Bon Voyage";
    src: 
        url("../assets/fonts/made-bon-voyage-bold.woff") format("woff"),
        url("../assets/fonts/made-bon-voyage-thin.woff") format("woff");
    font-weight: 400 700;
}

@font-face {
    font-family: "Roboto";
    src:
        url("../assets/fonts/roboto-regular.woff") format("woff");
}

#hero {
    background-image: url("/assets/img/lara-y-nico-hero.webp");
    background-size: cover;
    background-position: center;
}

#hero h1 {
    letter-spacing: var(--space-l);
}

#la-rioja {
    background-image: url("/assets/img/la-rioja-iglesia.webp");
    background-size: cover;
    background-position: center;
}

#the-fest {
    background-image: url("/assets/img/salon-de-fiestas.webp");
    background-size: cover;
    background-position: center;
}

#confirm {
    aspect-ratio: 16 / 7;
    background-image: url(/assets/img/tarjeta-background.webp);
    background-size: cover;
    background-position: center;
}

#dress-code {
    background-image: url(/assets/img/event-background.webp);
    background-size: cover;
    background-position: center;
}

.shadow-m {
    box-shadow: 0px 0px 17px rgba(0, 0, 0, 0.1);
}

.bg-blur {
    backdrop-filter: blur(10px);
}

.text-7xl {
    font-size: calc(var(--text-4xl) + var(--text-4xl));
}

.text-5xl {
    font-size: calc(var(--text-4xl) + var(--text-xl));
}

.none-decoration {
    text-decoration: none;
}

.screen-height {
    height: 100dvh;
}

.kapakana {
    font-family: "Kapakana", serif;
}

.roboto {
    font-family: "Roboto", sans-serif;
}

.made-bon-voyage {
    font-family: "Made Bon Voyage", serif;
}

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

.text-black {
    color: var(--black);
}

.border-black {
    border-color: var(--black);
}

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

.bg-white-op-50 {
    background-color: rgba(255, 255, 255, 0.75);
}

.text-white {
    color: var(--white);
}

.border-white {
    border-color: var(--white);
}

.bg-light-grey {
    background-color: var(--light-grey);
}

.text-light-grey {
    color: var(--light-grey);
}

.border-light-grey {
    border-color: var(--light-grey);
}

.padding-4xs {
    padding: 0.52rem;
    padding: var(--space-4xs);
}

.padding-3xs {
    padding: 0.66rem;
    padding: var(--space-3xs);
}

.padding-2xs {
    padding: 0.82rem;
    padding: var(--space-2xs);
}

.padding-xs {
    padding: 1.02rem;
    padding: var(--space-xs);
}

.padding-s {
    padding: 1.28rem;
    padding: var(--space-s);
}

.padding-m {
    padding: 1.6rem;
    padding: var(--space-m);
}

.padding-l {
    padding: 2rem;
    padding: var(--space-l);
}

.padding-xl {
    padding: 2.5rem;
    padding: var(--space-xl);
}

.padding-2xl {
    padding: 3.13rem;
    padding: var(--space-2xl);
}

.padding-3xl {
    padding: 3.91rem;
    padding: var(--space-3xl);
}

.padding-4xl {
    padding: 4.88rem;
    padding: var(--space-4xl);
}

.padding-horizontal-4xs {
    padding-left: 0.52rem;
    padding-left: var(--space-4xs);
    padding-right: 0.52rem;
    padding-right: var(--space-4xs);
}

.padding-horizontal-3xs {
    padding-left: 0.66rem;
    padding-left: var(--space-3xs);
    padding-right: 0.66rem;
    padding-right: var(--space-3xs);
}

.padding-horizontal-2xs {
    padding-left: 0.82rem;
    padding-left: var(--space-2xs);
    padding-right: 0.82rem;
    padding-right: var(--space-2xs);
}

.padding-horizontal-xs {
    padding-left: 1.02rem;
    padding-left: var(--space-xs);
    padding-right: 1.02rem;
    padding-right: var(--space-xs);
}

.padding-horizontal-s {
    padding-left: 1.28rem;
    padding-left: var(--space-s);
    padding-right: 1.28rem;
    padding-right: var(--space-s);
}

.padding-horizontal-m {
    padding-left: 1.6rem;
    padding-left: var(--space-m);
    padding-right: 1.6rem;
    padding-right: var(--space-m);
}

.padding-horizontal-l {
    padding-left: 2rem;
    padding-left: var(--space-l);
    padding-right: 2rem;
    padding-right: var(--space-l);
}

.padding-horizontal-xl {
    padding-left: 2.5rem;
    padding-left: var(--space-xl);
    padding-right: 2.5rem;
    padding-right: var(--space-xl);
}

.padding-horizontal-2xl {
    padding-left: 3.13rem;
    padding-left: var(--space-2xl);
    padding-right: 3.13rem;
    padding-right: var(--space-2xl);
}

.padding-horizontal-3xl {
    padding-left: 3.91rem;
    padding-left: var(--space-3xl);
    padding-right: 3.91rem;
    padding-right: var(--space-3xl);
}

.padding-horizontal-4xl {
    padding-left: 4.88rem;
    padding-left: var(--space-4xl);
    padding-right: 4.88rem;
    padding-right: var(--space-4xl);
}

.padding-vertical-4xs {
    padding-top: 0.52rem;
    padding-top: var(--space-4xs);
    padding-bottom: 0.52rem;
    padding-bottom: var(--space-4xs);
}

.padding-vertical-3xs {
    padding-top: 0.66rem;
    padding-top: var(--space-3xs);
    padding-bottom: 0.66rem;
    padding-bottom: var(--space-3xs);
}

.padding-vertical-2xs {
    padding-top: 0.82rem;
    padding-top: var(--space-2xs);
    padding-bottom: 0.82rem;
    padding-bottom: var(--space-2xs);
}

.padding-vertical-xs {
    padding-top: 1.02rem;
    padding-top: var(--space-xs);
    padding-bottom: 1.02rem;
    padding-bottom: var(--space-xs);
}

.padding-vertical-s {
    padding-top: 1.28rem;
    padding-top: var(--space-s);
    padding-bottom: 1.28rem;
    padding-bottom: var(--space-s);
}

.padding-vertical-m {
    padding-top: 1.6rem;
    padding-top: var(--space-m);
    padding-bottom: 1.6rem;
    padding-bottom: var(--space-m);
}

.padding-vertical-l {
    padding-top: 2rem;
    padding-top: var(--space-l);
    padding-bottom: 2rem;
    padding-bottom: var(--space-l);
}

.padding-vertical-xl {
    padding-top: 2.5rem;
    padding-top: var(--space-xl);
    padding-bottom: 2.5rem;
    padding-bottom: var(--space-xl);
}

.padding-vertical-2xl {
    padding-top: 3.13rem;
    padding-top: var(--space-2xl);
    padding-bottom: 3.13rem;
    padding-bottom: var(--space-2xl);
}

.padding-vertical-3xl {
    padding-top: 3.91rem;
    padding-top: var(--space-3xl);
    padding-bottom: 3.91rem;
    padding-bottom: var(--space-3xl);
}

.padding-vertical-4xl {
    padding-top: 4.88rem;
    padding-top: var(--space-4xl);
    padding-bottom: 4.88rem;
    padding-bottom: var(--space-4xl);
}

.padding-top-4xs {
    padding-top: 0.52rem;
    padding-top: var(--space-4xs);
}

.padding-top-3xs {
    padding-top: 0.66rem;
    padding-top: var(--space-3xs);
}

.padding-top-2xs {
    padding-top: 0.82rem;
    padding-top: var(--space-2xs);
}

.padding-top-xs {
    padding-top: 1.02rem;
    padding-top: var(--space-xs);
}

.padding-top-s {
    padding-top: 1.28rem;
    padding-top: var(--space-s);
}

.padding-top-m {
    padding-top: 1.6rem;
    padding-top: var(--space-m);
}

.padding-top-l {
    padding-top: 2rem;
    padding-top: var(--space-l);
}

.padding-top-xl {
    padding-top: 2.5rem;
    padding-top: var(--space-xl);
}

.padding-top-2xl {
    padding-top: 3.13rem;
    padding-top: var(--space-2xl);
}

.padding-top-3xl {
    padding-top: 3.91rem;
    padding-top: var(--space-3xl);
}

.padding-top-4xl {
    padding-top: 4.88rem;
    padding-top: var(--space-4xl);
}

.padding-right-4xs {
    padding-right: 0.52rem;
    padding-right: var(--space-4xs);
}

.padding-right-3xs {
    padding-right: 0.66rem;
    padding-right: var(--space-3xs);
}

.padding-right-2xs {
    padding-right: 0.82rem;
    padding-right: var(--space-2xs);
}

.padding-right-xs {
    padding-right: 1.02rem;
    padding-right: var(--space-xs);
}

.padding-right-s {
    padding-right: 1.28rem;
    padding-right: var(--space-s);
}

.padding-right-m {
    padding-right: 1.6rem;
    padding-right: var(--space-m);
}

.padding-right-l {
    padding-right: 2rem;
    padding-right: var(--space-l);
}

.padding-right-xl {
    padding-right: 2.5rem;
    padding-right: var(--space-xl);
}

.padding-right-2xl {
    padding-right: 3.13rem;
    padding-right: var(--space-2xl);
}

.padding-right-3xl {
    padding-right: 3.91rem;
    padding-right: var(--space-3xl);
}

.padding-right-4xl {
    padding-right: 4.88rem;
    padding-right: var(--space-4xl);
}

.padding-bottom-4xs {
    padding-bottom: 0.52rem;
    padding-bottom: var(--space-4xs);
}

.padding-bottom-3xs {
    padding-bottom: 0.66rem;
    padding-bottom: var(--space-3xs);
}

.padding-bottom-2xs {
    padding-bottom: 0.82rem;
    padding-bottom: var(--space-2xs);
}

.padding-bottom-xs {
    padding-bottom: 1.02rem;
    padding-bottom: var(--space-xs);
}

.padding-bottom-s {
    padding-bottom: 1.28rem;
    padding-bottom: var(--space-s);
}

.padding-bottom-m {
    padding-bottom: 1.6rem;
    padding-bottom: var(--space-m);
}

.padding-bottom-l {
    padding-bottom: 2rem;
    padding-bottom: var(--space-l);
}

.padding-bottom-xl {
    padding-bottom: 2.5rem;
    padding-bottom: var(--space-xl);
}

.padding-bottom-2xl {
    padding-bottom: 3.13rem;
    padding-bottom: var(--space-2xl);
}

.padding-bottom-3xl {
    padding-bottom: 3.91rem;
    padding-bottom: var(--space-3xl);
}

.padding-bottom-4xl {
    padding-bottom: 4.88rem;
    padding-bottom: var(--space-4xl);
}

.padding-left-4xs {
    padding-left: 0.52rem;
    padding-left: var(--space-4xs);
}

.padding-left-3xs {
    padding-left: 0.66rem;
    padding-left: var(--space-3xs);
}

.padding-left-2xs {
    padding-left: 0.82rem;
    padding-left: var(--space-2xs);
}

.padding-left-xs {
    padding-left: 1.02rem;
    padding-left: var(--space-xs);
}

.padding-left-s {
    padding-left: 1.28rem;
    padding-left: var(--space-s);
}

.padding-left-m {
    padding-left: 1.6rem;
    padding-left: var(--space-m);
}

.padding-left-l {
    padding-left: 2rem;
    padding-left: var(--space-l);
}

.padding-left-xl {
    padding-left: 2.5rem;
    padding-left: var(--space-xl);
}

.padding-left-2xl {
    padding-left: 3.13rem;
    padding-left: var(--space-2xl);
}

.padding-left-3xl {
    padding-left: 3.91rem;
    padding-left: var(--space-3xl);
}

.padding-left-4xl {
    padding-left: 4.88rem;
    padding-left: var(--space-4xl);
}

.margin-4xs {
    margin: 0.52rem;
    margin: var(--space-4xs);
}

.margin-3xs {
    margin: 0.66rem;
    margin: var(--space-3xs);
}

.margin-2xs {
    margin: 0.82rem;
    margin: var(--space-2xs);
}

.margin-xs {
    margin: 1.02rem;
    margin: var(--space-xs);
}

.margin-s {
    margin: 1.28rem;
    margin: var(--space-s);
}

.margin-m {
    margin: 1.6rem;
    margin: var(--space-m);
}

.margin-l {
    margin: 2rem;
    margin: var(--space-l);
}

.margin-xl {
    margin: 2.5rem;
    margin: var(--space-xl);
}

.margin-2xl {
    margin: 3.13rem;
    margin: var(--space-2xl);
}

.margin-3xl {
    margin: 3.91rem;
    margin: var(--space-3xl);
}

.margin-4xl {
    margin: 4.88rem;
    margin: var(--space-4xl);
}

.margin-horizontal-4xs {
    margin-left: 0.52rem;
    margin-left: var(--space-4xs);
    margin-right: 0.52rem;
    margin-right: var(--space-4xs);
}

.margin-horizontal-3xs {
    margin-left: 0.66rem;
    margin-left: var(--space-3xs);
    margin-right: 0.66rem;
    margin-right: var(--space-3xs);
}

.margin-horizontal-2xs {
    margin-left: 0.82rem;
    margin-left: var(--space-2xs);
    margin-right: 0.82rem;
    margin-right: var(--space-2xs);
}

.margin-horizontal-xs {
    margin-left: 1.02rem;
    margin-left: var(--space-xs);
    margin-right: 1.02rem;
    margin-right: var(--space-xs);
}

.margin-horizontal-s {
    margin-left: 1.28rem;
    margin-left: var(--space-s);
    margin-right: 1.28rem;
    margin-right: var(--space-s);
}

.margin-horizontal-m {
    margin-left: 1.6rem;
    margin-left: var(--space-m);
    margin-right: 1.6rem;
    margin-right: var(--space-m);
}

.margin-horizontal-l {
    margin-left: 2rem;
    margin-left: var(--space-l);
    margin-right: 2rem;
    margin-right: var(--space-l);
}

.margin-horizontal-xl {
    margin-left: 2.5rem;
    margin-left: var(--space-xl);
    margin-right: 2.5rem;
    margin-right: var(--space-xl);
}

.margin-horizontal-2xl {
    margin-left: 3.13rem;
    margin-left: var(--space-2xl);
    margin-right: 3.13rem;
    margin-right: var(--space-2xl);
}

.margin-horizontal-3xl {
    margin-left: 3.91rem;
    margin-left: var(--space-3xl);
    margin-right: 3.91rem;
    margin-right: var(--space-3xl);
}

.margin-horizontal-4xl {
    margin-left: 4.88rem;
    margin-left: var(--space-4xl);
    margin-right: 4.88rem;
    margin-right: var(--space-4xl);
}

.margin-vertical-4xs {
    margin-top: 0.52rem;
    margin-top: var(--space-4xs);
    margin-bottom: 0.52rem;
    margin-bottom: var(--space-4xs);
}

.margin-vertical-3xs {
    margin-top: 0.66rem;
    margin-top: var(--space-3xs);
    margin-bottom: 0.66rem;
    margin-bottom: var(--space-3xs);
}

.margin-vertical-2xs {
    margin-top: 0.82rem;
    margin-top: var(--space-2xs);
    margin-bottom: 0.82rem;
    margin-bottom: var(--space-2xs);
}

.margin-vertical-xs {
    margin-top: 1.02rem;
    margin-top: var(--space-xs);
    margin-bottom: 1.02rem;
    margin-bottom: var(--space-xs);
}

.margin-vertical-s {
    margin-top: 1.28rem;
    margin-top: var(--space-s);
    margin-bottom: 1.28rem;
    margin-bottom: var(--space-s);
}

.margin-vertical-m {
    margin-top: 1.6rem;
    margin-top: var(--space-m);
    margin-bottom: 1.6rem;
    margin-bottom: var(--space-m);
}

.margin-vertical-l {
    margin-top: 2rem;
    margin-top: var(--space-l);
    margin-bottom: 2rem;
    margin-bottom: var(--space-l);
}

.margin-vertical-xl {
    margin-top: 2.5rem;
    margin-top: var(--space-xl);
    margin-bottom: 2.5rem;
    margin-bottom: var(--space-xl);
}

.margin-vertical-2xl {
    margin-top: 3.13rem;
    margin-top: var(--space-2xl);
    margin-bottom: 3.13rem;
    margin-bottom: var(--space-2xl);
}

.margin-vertical-3xl {
    margin-top: 3.91rem;
    margin-top: var(--space-3xl);
    margin-bottom: 3.91rem;
    margin-bottom: var(--space-3xl);
}

.margin-vertical-4xl {
    margin-top: 4.88rem;
    margin-top: var(--space-4xl);
    margin-bottom: 4.88rem;
    margin-bottom: var(--space-4xl);
}

.margin-top-4xs {
    margin-top: 0.52rem;
    margin-top: var(--space-4xs);
}

.margin-top-3xs {
    margin-top: 0.66rem;
    margin-top: var(--space-3xs);
}

.margin-top-2xs {
    margin-top: 0.82rem;
    margin-top: var(--space-2xs);
}

.margin-top-xs {
    margin-top: 1.02rem;
    margin-top: var(--space-xs);
}

.margin-top-s {
    margin-top: 1.28rem;
    margin-top: var(--space-s);
}

.margin-top-m {
    margin-top: 1.6rem;
    margin-top: var(--space-m);
}

.margin-top-l {
    margin-top: 2rem;
    margin-top: var(--space-l);
}

.margin-top-xl {
    margin-top: 2.5rem;
    margin-top: var(--space-xl);
}

.margin-top-2xl {
    margin-top: 3.13rem;
    margin-top: var(--space-2xl);
}

.margin-top-3xl {
    margin-top: 3.91rem;
    margin-top: var(--space-3xl);
}

.margin-top-4xl {
    margin-top: 4.88rem;
    margin-top: var(--space-4xl);
}

.margin-right-4xs {
    margin-right: 0.52rem;
    margin-right: var(--space-4xs);
}

.margin-right-3xs {
    margin-right: 0.66rem;
    margin-right: var(--space-3xs);
}

.margin-right-2xs {
    margin-right: 0.82rem;
    margin-right: var(--space-2xs);
}

.margin-right-xs {
    margin-right: 1.02rem;
    margin-right: var(--space-xs);
}

.margin-right-s {
    margin-right: 1.28rem;
    margin-right: var(--space-s);
}

.margin-right-m {
    margin-right: 1.6rem;
    margin-right: var(--space-m);
}

.margin-right-l {
    margin-right: 2rem;
    margin-right: var(--space-l);
}

.margin-right-xl {
    margin-right: 2.5rem;
    margin-right: var(--space-xl);
}

.margin-right-2xl {
    margin-right: 3.13rem;
    margin-right: var(--space-2xl);
}

.margin-right-3xl {
    margin-right: 3.91rem;
    margin-right: var(--space-3xl);
}

.margin-right-4xl {
    margin-right: 4.88rem;
    margin-right: var(--space-4xl);
}

.margin-bottom-4xs {
    margin-bottom: 0.52rem;
    margin-bottom: var(--space-4xs);
}

.margin-bottom-3xs {
    margin-bottom: 0.66rem;
    margin-bottom: var(--space-3xs);
}

.margin-bottom-2xs {
    margin-bottom: 0.82rem;
    margin-bottom: var(--space-2xs);
}

.margin-bottom-xs {
    margin-bottom: 1.02rem;
    margin-bottom: var(--space-xs);
}

.margin-bottom-s {
    margin-bottom: 1.28rem;
    margin-bottom: var(--space-s);
}

.margin-bottom-m {
    margin-bottom: 1.6rem;
    margin-bottom: var(--space-m);
}

.margin-bottom-l {
    margin-bottom: 2rem;
    margin-bottom: var(--space-l);
}

.margin-bottom-xl {
    margin-bottom: 2.5rem;
    margin-bottom: var(--space-xl);
}

.margin-bottom-2xl {
    margin-bottom: 3.13rem;
    margin-bottom: var(--space-2xl);
}

.margin-bottom-3xl {
    margin-bottom: 3.91rem;
    margin-bottom: var(--space-3xl);
}

.margin-bottom-4xl {
    margin-bottom: 4.88rem;
    margin-bottom: var(--space-4xl);
}

.margin-left-4xs {
    margin-left: 0.52rem;
    margin-left: var(--space-4xs);
}

.margin-left-3xs {
    margin-left: 0.66rem;
    margin-left: var(--space-3xs);
}

.margin-left-2xs {
    margin-left: 0.82rem;
    margin-left: var(--space-2xs);
}

.margin-left-xs {
    margin-left: 1.02rem;
    margin-left: var(--space-xs);
}

.margin-left-s {
    margin-left: 1.28rem;
    margin-left: var(--space-s);
}

.margin-left-m {
    margin-left: 1.6rem;
    margin-left: var(--space-m);
}

.margin-left-l {
    margin-left: 2rem;
    margin-left: var(--space-l);
}

.margin-left-xl {
    margin-left: 2.5rem;
    margin-left: var(--space-xl);
}

.margin-left-2xl {
    margin-left: 3.13rem;
    margin-left: var(--space-2xl);
}

.margin-left-3xl {
    margin-left: 3.91rem;
    margin-left: var(--space-3xl);
}

.margin-left-4xl {
    margin-left: 4.88rem;
    margin-left: var(--space-4xl);
}

.gap-4xs {
    gap: 0.52rem;
    gap: var(--space-4xs);
}

.gap-3xs {
    gap: 0.66rem;
    gap: var(--space-3xs);
}

.gap-2xs {
    gap: 0.82rem;
    gap: var(--space-2xs);
}

.gap-xs {
    gap: 1.02rem;
    gap: var(--space-xs);
}

.gap-s {
    gap: 1.28rem;
    gap: var(--space-s);
}

.gap-m {
    gap: 1.6rem;
    gap: var(--space-m);
}

.gap-l {
    gap: 2rem;
    gap: var(--space-l);
}

.gap-xl {
    gap: 2.5rem;
    gap: var(--space-xl);
}

.gap-2xl {
    gap: 3.13rem;
    gap: var(--space-2xl);
}

.gap-3xl {
    gap: 3.91rem;
    gap: var(--space-3xl);
}

.gap-4xl {
    gap: 4.88rem;
    gap: var(--space-4xl);
}

.gap-horizontal-4xs {
    column-gap: 0.52rem;
    column-gap: var(--space-4xs);
}

.gap-horizontal-3xs {
    column-gap: 0.66rem;
    column-gap: var(--space-3xs);
}

.gap-horizontal-2xs {
    column-gap: 0.82rem;
    column-gap: var(--space-2xs);
}

.gap-horizontal-xs {
    column-gap: 1.02rem;
    column-gap: var(--space-xs);
}

.gap-horizontal-s {
    column-gap: 1.28rem;
    column-gap: var(--space-s);
}

.gap-horizontal-m {
    column-gap: 1.6rem;
    column-gap: var(--space-m);
}

.gap-horizontal-l {
    column-gap: 2rem;
    column-gap: var(--space-l);
}

.gap-horizontal-xl {
    column-gap: 2.5rem;
    column-gap: var(--space-xl);
}

.gap-horizontal-2xl {
    column-gap: 3.13rem;
    column-gap: var(--space-2xl);
}

.gap-horizontal-3xl {
    column-gap: 3.91rem;
    column-gap: var(--space-3xl);
}

.gap-horizontal-4xl {
    column-gap: 4.88rem;
    column-gap: var(--space-4xl);
}

.gap-vertical-4xs {
    row-gap: 0.52rem;
    row-gap: var(--space-4xs);
}

.gap-vertical-3xs {
    row-gap: 0.66rem;
    row-gap: var(--space-3xs);
}

.gap-vertical-2xs {
    row-gap: 0.82rem;
    row-gap: var(--space-2xs);
}

.gap-vertical-xs {
    row-gap: 1.02rem;
    row-gap: var(--space-xs);
}

.gap-vertical-s {
    row-gap: 1.28rem;
    row-gap: var(--space-s);
}

.gap-vertical-m {
    row-gap: 1.6rem;
    row-gap: var(--space-m);
}

.gap-vertical-l {
    row-gap: 2rem;
    row-gap: var(--space-l);
}

.gap-vertical-xl {
    row-gap: 2.5rem;
    row-gap: var(--space-xl);
}

.gap-vertical-2xl {
    row-gap: 3.13rem;
    row-gap: var(--space-2xl);
}

.gap-vertical-3xl {
    row-gap: 3.91rem;
    row-gap: var(--space-3xl);
}

.gap-vertical-4xl {
    row-gap: 4.88rem;
    row-gap: var(--space-4xl);
}

.margin-top-auto {
    margin-top: auto;
}

.margin-right-auto {
    margin-right: auto;
}

.margin-bottom-auto {
    margin-bottom: auto;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-auto {
    margin: auto;
}

.padding-vertical-auto {
    padding-top: auto;
    padding-bottom: auto;
}

.padding-horizontal-auto {
    padding-left: auto;
    padding-right: auto;
}

.text-xs {
    font-size: 1.26rem;
    font-size: var(--text-xs);
}

.text-s {
    font-size: 1.42rem;
    font-size: var(--text-s);
}

.text-m {
    font-size: 1.6rem;
    font-size: var(--text-m);
}

.text-l {
    font-size: 1.8rem;
    font-size: var(--text-l);
}

.text-xl {
    font-size: 2.02rem;
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: 2.28rem;
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: 2.56rem;
    font-size: var(--text-3xl);
}

.text-4xl {
    font-size: 2.88rem;
    font-size: var(--text-4xl);
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

.font-300 {
    font-weight: 300;
}

.font-400 {
    font-weight: 400;
}

.font-500 {
    font-weight: 500;
}

.font-700 {
    font-weight: 700;
}

.font-800 {
    font-weight: 800;
}

.font-900 {
    font-weight: 900;
}

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

.row {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}

.column {
    display: grid;
    grid-auto-flow: row;
    justify-items: start;
    align-content: start;
}

.columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.columns-2 > * {
    min-width: 0;
}

.columns-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

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

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

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

.columns-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.columns-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.columns-9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}

.columns-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

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

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

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

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

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

.items-left {
    justify-items: start;
}

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

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

.content-center {
    justify-content: center;
}

.items-right {
    justify-items: end;
}

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

.items-top {
    align-items: start;
}

.content-top {
    align-content: start;
}

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

.content-middle {
    align-content: center;
}

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

.content-bottom {
    align-content: end;
}

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

.content-stretch {
    justify-content: stretch;
}

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

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

.self-left {
    margin-right: auto;
    place-self: start;
}

.self-center {
    margin-inline: auto;
    place-self: center;
}

.self-right {
    margin-left: auto;
    place-self: end;
}

.self-top {
    margin-bottom: auto;
    align-self: start;
}

.self-middle {
    margin-block: auto;
    align-self: center;
}

.self-bottom {
    margin-top: auto;
    align-self: end;
}

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

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.width-90 {
    width: 90%;
}

.width-80 {
    width: 80%;
}

.width-70 {
    width: 70%;
}

.width-60 {
    width: 60%;
}

.width-50 {
    width: 50%;
}

.width-40 {
    width: 40%;
}

.width-30 {
    width: 30%;
}

.width-20 {
    width: 20%;
}

.width-10 {
    width: 10%;
}

.max-site-width {
    max-width: 140rem;
    width: 100%;
}

.max-width-140 {
    max-width: 140rem;
    width: 100%;
}

.max-width-130 {
    max-width: 130rem;
}

.max-width-120 {
    max-width: 120rem;
}

.max-width-110 {
    max-width: 110rem;
}

.max-width-100 {
    max-width: 100rem;
}

.max-width-90 {
    max-width: 90rem;
}

.max-width-80 {
    max-width: 80rem;
}

.max-width-70 {
    max-width: 70rem;
}

.max-width-60 {
    max-width: 60rem;
}

.max-width-50 {
    max-width: 50rem;
}

.max-width-40 {
    max-width: 40rem;
}

.max-width-30 {
    max-width: 30rem;
}

.max-width-20 {
    max-width: 20rem;
}

.max-width-10 {
    max-width: 10rem;
}

.radius-xs {
    border-radius: var(--radius-xs);
}

.radius-s {
    border-radius: var(--radius-s);
}

.radius-m {
    border-radius: var(--radius-m);
}

.radius-l {
    border-radius: var(--radius-l);
}

.radius-xl {
    border-radius: var(--radius-xl);
}

.radius-full {
    border-radius: var(--radius-full);
}

.border {
    border-width: 1px;
    border-style: solid;
}

.border-left {
    border-left-width: 1px;
    border-left-style: solid;
}

.border-right {
    border-right-width: 1px;
    border-right-style: solid;
}

.border-top {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-bottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.opacity-0 {
    opacity: 0;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-100 {
    opacity: 1;
}

.aspect-1 {
    aspect-ratio: 1;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-3-4 {
    aspect-ratio: 3 / 4;
}

.aspect-3-2 {
    aspect-ratio: 3 / 2;
}

.aspect-2-3 {
    aspect-ratio: 2 / 3;
}

.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-9-16 {
    aspect-ratio: 9 / 16;
}

.fit-contain {
    object-fit: contain;
}

.fit-cover {
    object-fit: cover;
}

.grayscale {
    filter: grayscale(1);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.hidden {
    visibility: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.list-none {
    list-style-type: none;
}

.white-space-nowrap {
    white-space: nowrap;
}

.transition-global {
    transition: all 0.3s;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.fixed {
    position: fixed;
}

.bottom-0 {
    bottom: 0;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

.cursor-auto {
    cursor: auto;
}

.no-pointer-events {
    pointer-events: none;
}

.z--1 {
    z-index: -1;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}

/* Popup Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-out;
}

.popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-content {
    max-width: 500px;
    width: 90%;
    position: relative;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease-out;
}

.popup-overlay.show .popup-content {
    opacity: 1;
    transform: scale(1);
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.fade-in {
    opacity: 0;
}

.fade-in.animate {
    animation: fadeIn 1s ease-out forwards;
}

@media(max-width: 1024px) {
    .column--on-m {
        grid-template-columns: 1fr;
    }
    .order-4--on-m {
        order: 4;
    }
    #hero {
        background-position-x: 63%;
    }
    #confirm {
        aspect-ratio: auto;
        background-image: none;
        background-color: var(--black);
    }
    #confirm > div > div {
        position: static;
        padding-bottom: 0;
        gap: var(--space-m);
    }
    #confirm > div {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }
    #footer img{
        max-width: 150px;
    }
    .text-4xl--on-m {
        font-size: var(--text-4xl);
    }
    #hero span {
        font-size: var(--text-4xl);
    }
    #hero h1 {
        font-size: var(--text-4xl);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}