/* ==========================================================
   VINCIT MANAGEMENT CONSULTING
   FILE       : 04-layout.css
   PURPOSE    : Global Layout, Containers & Sections
   VERSION    : 1.0.0
========================================================== */


/* ==========================================================
   CONTAINER
========================================================== */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}


/* ==========================================================
   SECTION
========================================================== */

.section {
    padding-block: var(--section-padding);
}


.section--light {
    background: var(--bg-secondary);
}


.section--dark {
    background: var(--bg-dark);
}


.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-white);
}


.section--dark p {
    color: rgba(255, 255, 255, 0.78);
}


/* ==========================================================
   SECTION HEADER
========================================================== */

.section-header {
    margin-bottom: 55px;
}


.section-header--center {
    text-align: center;
}


.section-header--center .section-intro {
    margin-inline: auto;
}


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

.grid {
    display: grid;
}


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


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


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


.gap-sm {
    gap: 20px;
}


.gap-md {
    gap: 30px;
}


.gap-lg {
    gap: 50px;
}