/* ==========================================================
   ÉLAN Layout
========================================================== */

/* ==========================================================
   CONTAINER
========================================================== */

.container {

    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;

}

/* ==========================================================
   MAIN
========================================================== */

main {

    position: relative;

}

/* ==========================================================
   SECTIONS
========================================================== */

section {

    position: relative;

    padding-block: clamp(5rem, 10vw, 8rem);

}

/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 100svh;

    overflow: hidden;

    isolation: isolate;

}

/* ==========================================================
   HERO IMAGE
========================================================== */

.hero__image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* ==========================================================
   HERO OVERLAY
========================================================== */

.hero__overlay {

    position: absolute;

    inset: 0;

    background: var(--color-overlay);

}

/* ==========================================================
   HERO CONTENT
========================================================== */

.hero__content {

    position: relative;

    z-index: var(--z-content);

    display: grid;

    place-items: center;

    padding-inline: var(--container-padding);

}

/* ==========================================================
   HERO INNER
========================================================== */

.hero__inner {

    display: grid;

    gap: clamp(1rem, 2vw, 2rem);

    text-align: center;

    max-width: 720px;

}

/* ==========================================================
   GALLERY
========================================================== */

.gallery {

    display: grid;

    gap: clamp(1rem, 2vw, 2rem);

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

}

/* ==========================================================
   DETAILS
========================================================== */

.details-grid {

    display: grid;

    gap: clamp(1.5rem,2vw,2rem);

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

}

/* ==========================================================
   RSVP
========================================================== */

#rsvpApp {

    display:grid;

    gap:var(--space-lg);

}

/* ==========================================================
   FOOTER
========================================================== */

.footer {

    padding:

        clamp(2rem,5vw,4rem)

        var(--container-padding);

    text-align:center;

}