/*==========================================================
LAYOUT
Bright Ocean Digital
==========================================================*/

/* SECTION SPACING */

section{

padding:110px 0;

position:relative;

}

.hero{

padding-top:170px;

padding-bottom:120px;

}

.container{

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

margin-inline:auto;

}

/* GRID UTILITIES */

.grid-2{

display:grid;

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

gap:80px;

align-items:center;

}

.grid-3{

display:grid;

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

gap:35px;

}

.grid-4{

display:grid;

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

gap:30px;

}

/* FLEX */

.flex{

display:flex;

align-items:center;

}

.flex-between{

display:flex;

justify-content:space-between;

align-items:center;

}

.flex-center{

display:flex;

justify-content:center;

align-items:center;

}

/* UTILITIES */

.text-center{

text-align:center;

}

.mx-auto{

margin-inline:auto;

}

.hidden{

display:none;

}

/* RESPONSIVE */

@media(max-width:992px){

.grid-2{

grid-template-columns:1fr;

gap:60px;

}

.grid-3{

grid-template-columns:1fr;

}

.grid-4{

grid-template-columns:1fr;

}

section{

padding:90px 0;

}

.hero{

padding-top:140px;

padding-bottom:90px;

}

}