/* ----------------------------------------------------------------------------------- */
/* site-page-layout/layout-a.css */
/* ----------------------------------------------------------------------------------- */
.spl-100 {
    width: 100%;
}

.spl-flex-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ----------------------------------------------------------------------------------- */
/* site-page-layout/layout-a.css - media queries */
/* ----------------------------------------------------------------------------------- */
@media screen and (min-width: 576px) {

    .spl-flex-container {
        flex-direction: row;
        gap: 15px;
    }

    .spl-flex-70 {
        flex: 0 0 70%;
    }

    .spl-flex-30 {
        flex: 0 0 30%;
    }
}