/* =====================================================
   THE BLACKOUT STANDARD
===================================================== */

.standard{
    position: relative;
    background:var(--color-bg);
    color:#fff;
    padding:120px 0;
}

.standard .section-head{
    max-width:720px;
    margin:0 auto 90px;
    text-align:center;
}

.standard .section-head h2{
    color:#fff;
}

.standard-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:center;
    margin-bottom:100px;
}

.standard-item:last-child{
    margin-bottom:0;
}

.standard-item.reverse{
    grid-template-areas:
        "image text";
}

.standard-item.reverse .standard-image{
    grid-area:image;
}

.standard-item.reverse .standard-content{
    grid-area:text;
}

.standard-content{
    max-width:500px;
}

.standard-number{
    display:block;
    font-family:var(--font-display);
    font-size:4rem;
    font-weight:900;
    color:rgba(201,163,73,.25);
    margin-bottom:12px;
    line-height:1;
}

.standard-content h3{
    color:#fff;
    margin-bottom:18px;
}

.standard-content p{
    color:rgba(255,255,255,.72);
    line-height:1.9;
}

.standard-image{
    overflow:hidden;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xl);
}

.standard-image img{
    display:block;
    width:100%;
    height:420px;
    object-fit:cover;
    transition:
        transform .6s ease,
        filter .4s ease;
}

.standard-item:hover img{
    transform:scale(1.04);
}

.standard-item:hover .standard-number{
    color:var(--color-accent);
}

.standard-item:hover h3{
    color:var(--color-accent);
}

/* ---------- Standard Footer ---------- */

.standard-footer{
    max-width:700px;
    margin:100px auto 0;
    padding-top:70px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
}

.standard-footer h3{
    color:#fff;
    margin-bottom:18px;
}

.standard-footer p{
    color:rgba(255,255,255,.72);
    max-width:560px;
    margin:0 auto 36px;
    line-height:1.9;
}

.standard-footer .btn{
    min-width:220px;
}


/* Mobile formatting */

@media (max-width:900px){

    .standard-item,
    .standard-item.reverse{
        grid-template-columns:1fr;
        grid-template-areas:
            "image"
            "text";
        gap:36px;
    }

    .standard-content{
        max-width:100%;
    }

    .standard-image img{
        height:280px;
    }

    .standard{
        padding:90px 0;
    }
}