/*======================================
  Layout
======================================*/

/*--------------------------------------
 Container
--------------------------------------*/

.container{

    width:100%;

    max-width:var(--container-md);

    margin:0 auto;

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

}

.container-sm{

    max-width:var(--container-sm);

}

.container-lg{

    max-width:var(--container-lg);

}

.container-xl {
    max-width: var(--container-xl);
}


/*--------------------------------------
 Section
--------------------------------------*/

.section{

    padding:var(--section-padding);

}

.section-sm{

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

}

.section-lg{

    padding:calc(var(--space-2xl) * 1.5) 0;

}

/*--------------------------------------
 Grid
--------------------------------------*/

.grid{

    display:grid;

    gap:var(--space-lg);

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/*--------------------------------------
 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;

}

/*--------------------------------------
 Row
--------------------------------------*/

.row{

    display:flex;

    flex-wrap:wrap;

    margin-left:calc(var(--space-sm) * -1);

    margin-right:calc(var(--space-sm) * -1);

}

.col{

    flex:1;

    padding-left:var(--space-sm);

    padding-right:var(--space-sm);

}

/*--------------------------------------
 Gap
--------------------------------------*/

.gap-xs{

    gap:var(--space-xs);

}

.gap-sm{

    gap:var(--space-sm);

}

.gap-md{

    gap:var(--space-md);

}

.gap-lg{

    gap:var(--space-lg);

}

.gap-xl{

    gap:var(--space-xl);

}

/*--------------------------------------
 Width
--------------------------------------*/

.w-100{

    width:100%;

}

.w-75{

    width:75%;

}

.w-50{

    width:50%;

}

.w-25{

    width:25%;

}

/*--------------------------------------
 Margin
--------------------------------------*/

.mt-xs{

    margin-top:var(--space-xs);

}

.mt-sm{

    margin-top:var(--space-sm);

}

.mt-md{

    margin-top:var(--space-md);

}

.mt-lg{

    margin-top:var(--space-lg);

}

.mt-xl{

    margin-top:var(--space-xl);

}

.mb-xs{

    margin-bottom:var(--space-xs);

}

.mb-sm{

    margin-bottom:var(--space-sm);

}

.mb-md{

    margin-bottom:var(--space-md);

}

.mb-lg{

    margin-bottom:var(--space-lg);

}

.mb-xl{

    margin-bottom:var(--space-xl);

}

/*--------------------------------------
 Padding
--------------------------------------*/

.pt-xs{

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

}

.pt-sm{

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

}

.pt-md{

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

}

.pt-lg{

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

}

.pt-xl{

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

}

.pb-xs{

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

}

.pb-sm{

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

}

.pb-md{

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

}

.pb-lg{

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

}

.pb-xl{

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

}

/*--------------------------------------
 Text
--------------------------------------*/

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

/*--------------------------------------
 Display
--------------------------------------*/

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.d-inline{

    display:inline-block;

}

/*--------------------------------------
 Responsive
--------------------------------------*/

@media (max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}

@media (max-width:768px){

    .section{

        padding:var(--space-2xl) 0;

    }

    .section-lg{

        padding:calc(var(--space-2xl) + var(--space-xl)) 0;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .row{

        flex-direction:column;

    }

    .w-25,
    .w-50,
    .w-75{

        width:100%;

    }

}