/*=========================================================
 Systronics Website
 layout.css
 Shared Layout & Utility Classes
=========================================================*/

/* Containers */

.container-wide{
    width:min(1400px,94%);
    margin:0 auto;
}

.container-narrow{
    width:min(900px,92%);
    margin:0 auto;
}

/* Spacing */

.mt-0{margin-top:0}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}

.mb-0{margin-bottom:0}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}

.py-sm{padding:2rem 0}
.py-md{padding:4rem 0}
.py-lg{padding:6rem 0}

/* Accent bars */

.accent-bar{
    width:90px;
    height:6px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        var(--color-green),
        var(--color-blue),
        var(--color-orange)
    );
    margin:1rem 0 2rem;
}

/* Background helpers */

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

.bg-white{
    background:#fff;
}

/* Split section */

.split{
    display:grid;
    grid-template-columns:55% 45%;
    gap:4rem;
    align-items:center;
}

.split.reverse{
    grid-template-columns:45% 55%;
}

/* Image frame */

.image-frame{
    background:#fff;
    border-radius:var(--radius-large);
    box-shadow:var(--shadow-medium);
    padding:1rem;
}

.image-frame img{
    width:100%;
    border-radius:calc(var(--radius-large) - 6px);
}

/* Placeholder image */

.image-placeholder{
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:3px dashed #bfd0dd;
    border-radius:var(--radius-large);
    background:#eef6fb;
    color:var(--text-secondary);
    padding:2rem;
}

/* CTA banner */

.cta-banner{
    background:linear-gradient(
        135deg,
        var(--color-green),
        var(--color-blue)
    );
    color:#fff;
    border-radius:var(--radius-large);
    padding:3rem;
}

.cta-banner h2,
.cta-banner p{
    color:#fff;
}

@media(max-width:900px){

    .split,
    .split.reverse{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .image-placeholder{
        min-height:300px;
    }

}