/* ==========================================================
   SERGIO

   File: layout.css
   Version: 1.1

   Purpose:
   Defines the global layout system used throughout
   the SERGIO digital flagship.

========================================================== */


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

.l-container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


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

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


/* ==========================================================
   FULL WIDTH
========================================================== */

.l-full-width {
    width: 100%;
}


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

.l-stack > * + * {
    margin-top: var(--space-24);
}


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

.l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
}


/* ==========================================================
   CENTER
========================================================== */

.l-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================
   MOBILE FIRST
========================================================== */

@media (min-width: 768px) {

    .l-container {
        padding-inline: var(--space-32);
    }

}


@media (min-width: 1200px) {

    .l-container {
        padding-inline: var(--space-48);
    }

}