/*=========================================================
    LAYOUT.CSS
    MundoArte Premium UI
=========================================================*/

/*=========================================================
    CONTAINERS
=========================================================*/

.container{

    width:min(var(--container),92%);

    margin:auto;

}

.container-small{

    width:min(var(--container-small),92%);

    margin:auto;

}

.container-wide{

    width:min(var(--container-wide),95%);

    margin:auto;

}

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

section{

    position:relative;

    padding:var(--space-section) 0;

}

.section-light{

    background:#fff;

}

.section-dark{

    background:var(--dark);

    color:#fff;

}

.section-alt{

    background:var(--surface-alt);

}

/*=========================================================
    GRID
=========================================================*/

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:50px;

}

.grid-3{

    display:grid;

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

    gap:40px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}

/*=========================================================
    FLEX
=========================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/*=========================================================
    ALIGNMENTS
=========================================================*/

.items-center{

    align-items:center;

}

.items-start{

    align-items:flex-start;

}

.items-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

/*=========================================================
    GAPS
=========================================================*/

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}

.gap-40{

    gap:40px;

}

.gap-60{

    gap:60px;

}

/*=========================================================
    WIDTHS
=========================================================*/

.w-100{

    width:100%;

}

.w-75{

    width:75%;

}

.w-50{

    width:50%;

}

.w-auto{

    width:auto;

}

/*=========================================================
    MARGINS
=========================================================*/

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mt-80{

    margin-top:80px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.mb-80{

    margin-bottom:80px;

}

/*=========================================================
    PADDINGS
=========================================================*/

.py{

    padding:var(--space-section) 0;

}

.pt{

    padding-top:var(--space-section);

}

.pb{

    padding-bottom:var(--space-section);

}

/*=========================================================
    CARDS
=========================================================*/

.card{

    background:#fff;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

/*=========================================================
    GLASS
=========================================================*/

.glass{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

}

/*=========================================================
    DIVIDERS
=========================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--border);

}

/*=========================================================
    OVERFLOW
=========================================================*/

.overflow-hidden{

    overflow:hidden;

}

/*=========================================================
    POSITION
=========================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

/*=========================================================
    BACKGROUNDS
=========================================================*/

.bg-white{

    background:#fff;

}

.bg-light{

    background:var(--background);

}

.bg-dark{

    background:var(--dark);

}

/*=========================================================
    BORDER RADIUS
=========================================================*/

.radius{

    border-radius:var(--radius-lg);

}

.radius-xl{

    border-radius:var(--radius-xl);

}

.round{

    border-radius:50%;

}

/*=========================================================
    SHADOWS
=========================================================*/

.shadow{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

.shadow-xl{

    box-shadow:var(--shadow-xl);

}

/*=========================================================
    IMAGE COVER
=========================================================*/

.cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*=========================================================
    HOVER SCALE
=========================================================*/

.scale{

    transition:var(--transition);

}

.scale:hover{

    transform:scale(1.05);

}

/*=========================================================
    HOVER LIFT
=========================================================*/

.lift{

    transition:var(--transition);

}

.lift:hover{

    transform:translateY(-12px);

}

/*=========================================================
    CENTER
=========================================================*/

.center{

    text-align:center;

}

/*=========================================================
    MAX WIDTH
=========================================================*/

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}

.max-1000{

    max-width:1000px;

}

/*=========================================================
    Z-INDEX
=========================================================*/

.z-1{

    z-index:1;

}

.z-5{

    z-index:5;

}

.z-10{

    z-index:10;

}

/*=========================================================
    TRANSITIONS
=========================================================*/

.transition{

    transition:var(--transition);

}