/* ==========================================================
   SPARK DESIGN SYSTEM™
   LAYOUT
   v2.2
========================================================== */

/* ==========================================================
   RESET
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:1.7;

    color:var(--text-1);

    background:var(--surface-1);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;

}

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

.container-wide{
    max-width: 1400px;
}

.container{

    width:100%;

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

    margin:0 auto;

    padding:0 24px;

}

.container-lg{

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

}

.container-sm{

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

}

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

.section{

    position:relative;

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

}

.section-soft{

    background:var(--surface-2);

}

.section + .section{

    border-top:1px solid rgba(0,0,0,.04);

}

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

.content-narrow{

    max-width:760px;

    margin:0 auto 50px;

}

.content-medium{

    max-width:900px;

    margin-inline:auto;

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.mx-auto{

    margin-inline:auto;

}

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

}

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:var(--space-xl);

}

.grid-3{

    display:grid;

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

    gap:var(--space-xl);

}

/* ==========================================================
   SPACING
========================================================== */

.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);}
.mt-2xl{margin-top:var(--space-2xl);}

.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);}
.mb-2xl{margin-bottom:var(--space-2xl);}

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

@media (max-width:900px){

    .container{

        padding:0 20px;

    }

    .section{

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

    }

    .grid-2,
    .grid-3{

        grid-template-columns:1fr;

        gap:var(--space-lg);

    }

}

@media (max-width:768px){

    .section{

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

    }

}