/*=========================================================
44 Web Design Framework
-----------------------------------------------------------
Project      : 433
Client       : Vehicle Safety Solutions Ltd

File         : layout.css
Version      : 1.0.0

Author       : Ian Latus
Company      : 44 Web Design

Purpose
-------
Provides the structural layout system for pages,
including grids, flex layouts and responsive helpers.

Contents
--------
1. Main
2. Grid Layouts
3. Flex Layouts
4. Responsive

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


/*=========================================================
Dependencies

variables.css
base.css
utilities.css

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


/*=========================================================
1. Main
=========================================================*/

main {

    display: block;

}


/*=========================================================
2. Grid Layouts
=========================================================*/

.grid {

    display: grid;

    gap: var(--grid-gap);

}

.grid-2 {

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

}

.grid-3 {

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

}

.grid-4 {

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

}


/*=========================================================
3. Flex Layouts
=========================================================*/

.flex {

    display: flex;

}

.flex-wrap {

    flex-wrap: wrap;

}

.align-center {

    align-items: center;

}

.justify-between {

    justify-content: space-between;

}

.justify-center {

    justify-content: center;

}

.gap-sm {

    gap: var(--space-sm);

}

.gap-md {

    gap: var(--space-md);

}

.gap-lg {

    gap: var(--space-lg);

}


/*=========================================================
4. Responsive
=========================================================*/

@media (max-width: 992px) {

    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns: 1fr;

    }

}