/* ==========================================================================
   PROMESA DESIGN SYSTEM
   GRID 2.0
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--pb-color-bg);
    color: var(--pb-color-ink);
    font-family: var(--pb-font-main);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

.pb-container {

    width: min(
        calc(100% - (var(--pb-gutter) * 2)),
        var(--pb-wrap)
    );

    margin-inline: auto;

}

.pb-container-narrow {

    width: min(
        calc(100% - (var(--pb-gutter) * 2)),
        var(--pb-wrap-narrow)
    );

    margin-inline: auto;

}

/* =======================================================
   12 COLUMN GRID
   ======================================================= */

.pb-grid {

    display: grid;

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

    gap: clamp(20px,2vw,36px);

}

.pb-col-12{grid-column:span 12;}
.pb-col-11{grid-column:span 11;}
.pb-col-10{grid-column:span 10;}
.pb-col-9{grid-column:span 9;}
.pb-col-8{grid-column:span 8;}
.pb-col-7{grid-column:span 7;}
.pb-col-6{grid-column:span 6;}
.pb-col-5{grid-column:span 5;}
.pb-col-4{grid-column:span 4;}
.pb-col-3{grid-column:span 3;}
.pb-col-2{grid-column:span 2;}
.pb-col-1{grid-column:span 1;}

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

.pb-section{

    position:relative;

    padding-block:var(--pb-space-8);

}

.pb-section-large{

    padding-block:var(--pb-space-9);

}

.pb-section-small{

    padding-block:var(--pb-space-6);

}

/* =======================================================
   SPLIT
   ======================================================= */

.pb-split{

    display:grid;

    grid-template-columns:7fr 5fr;

    gap:min(6vw,90px);

    align-items:center;

}

.pb-split-reverse{

    grid-template-columns:5fr 7fr;

}

/* =======================================================
   STACK
   ======================================================= */

.pb-stack-xs>*+*{

    margin-top:var(--pb-space-2);

}

.pb-stack-sm>*+*{

    margin-top:var(--pb-space-3);

}

.pb-stack-md>*+*{

    margin-top:var(--pb-space-5);

}

.pb-stack-lg>*+*{

    margin-top:var(--pb-space-7);

}

/* =======================================================
   CLUSTER
   ======================================================= */

.pb-cluster{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

}

/* =======================================================
   DIVIDER
   ======================================================= */

.pb-divider{

    width:100%;

    height:1px;

    background:var(--pb-color-line);

}

/* =======================================================
   RESPONSIVE
   ======================================================= */

@media(max-width:1100px){

.pb-grid{

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

}

.pb-col-8,
.pb-col-7,
.pb-col-6,
.pb-col-5,
.pb-col-4{

grid-column:span 6;

}

.pb-col-3{

grid-column:span 3;

}

.pb-split{

grid-template-columns:1fr;

gap:60px;

}

}

@media(max-width:768px){

.pb-grid{

grid-template-columns:1fr;

gap:28px;

}

.pb-col-1,
.pb-col-2,
.pb-col-3,
.pb-col-4,
.pb-col-5,
.pb-col-6,
.pb-col-7,
.pb-col-8,
.pb-col-9,
.pb-col-10,
.pb-col-11,
.pb-col-12{

grid-column:1/-1;

}

.pb-section{

padding-block:72px;

}

.pb-section-large{

padding-block:96px;

}

}