/* ==========================================================
   ARMENIA CRYSTAL
   Design System v1.0
   layout.css
========================================================== */


/* ----------------------------------------------------------
   PAGE
---------------------------------------------------------- */

.page{

    width:100%;

    min-height:100vh;

    overflow:hidden;

}


/* ----------------------------------------------------------
   CONTAINER
---------------------------------------------------------- */

.container{

    width:min(
        calc(100% - 64px),
        var(--container-width)
    );

    margin-inline:auto;

}


.container-sm{

    width:min(
        calc(100% - 64px),
        1080px
    );

    margin-inline:auto;

}


.container-lg{

    width:min(
        calc(100% - 64px),
        1600px
    );

    margin-inline:auto;

}


/* ----------------------------------------------------------
   SECTIONS
---------------------------------------------------------- */

.section{

    padding-block:120px;

}

.section-sm{

    padding-block:80px;

}

.section-lg{

    padding-block:180px;

}

.section-first{

    padding-top:160px;

}

.section-last{

    padding-bottom:160px;

}


/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.grid{

    display:grid;

    gap:32px;

}


.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}


.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}


.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}


/* ----------------------------------------------------------
   FLEX
---------------------------------------------------------- */

.flex{

    display:flex;

}


.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}


.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.flex-column{

    display:flex;

    flex-direction:column;

}


/* ----------------------------------------------------------
   GAP
---------------------------------------------------------- */

.gap-8{

    gap:8px;

}

.gap-16{

    gap:16px;

}

.gap-24{

    gap:24px;

}

.gap-32{

    gap:32px;

}

.gap-48{

    gap:48px;

}

.gap-64{

    gap:64px;

}


/* ----------------------------------------------------------
   WIDTH
---------------------------------------------------------- */

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}


/* ----------------------------------------------------------
   SPACING
---------------------------------------------------------- */

.mt-16{

    margin-top:16px;

}

.mt-24{

    margin-top:24px;

}

.mt-32{

    margin-top:32px;

}

.mt-48{

    margin-top:48px;

}

.mt-64{

    margin-top:64px;

}


.mb-16{

    margin-bottom:16px;

}

.mb-24{

    margin-bottom:24px;

}

.mb-32{

    margin-bottom:32px;

}

.mb-48{

    margin-bottom:48px;

}

.mb-64{

    margin-bottom:64px;

}


/* ----------------------------------------------------------
   ALIGNMENT
---------------------------------------------------------- */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


/* ----------------------------------------------------------
   POSITION
---------------------------------------------------------- */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.sticky{

    position:sticky;

    top:0;

}

.overflow-hidden{

    overflow:hidden;

}


/* ----------------------------------------------------------
   DIVIDERS
---------------------------------------------------------- */

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}


.divider-gold{

    width:120px;

    height:1px;

    background:var(--color-gold);

}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width:1200px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

}


@media (max-width:1024px){

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .section{

        padding-block:96px;

    }

}


@media (max-width:768px){

    .container{

        width:calc(100% - 40px);

    }

    .container-sm{

        width:calc(100% - 40px);

    }

    .container-lg{

        width:calc(100% - 40px);

    }

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

    .section{

        padding-block:72px;

    }

    .section-lg{

        padding-block:100px;

    }

}

/* =========================================================
   CLICKABLE GOOGLE MAPS
========================================================= */
.google-map-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.google-map-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.open-google-map {
    display: inline-block;
    margin-top: 18px;
    color: #d4af37;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .16em;
}