:root {
    /* =========================
   BEFORE / AFTER VARIABLES
========================= */

/* section */
--ba-padding:120px;
--ba-bg:
linear-gradient(
180deg,
#0b0c0e 100%
);

/* header */
--ba-header-width:700px;
--ba-header-margin:0 auto 60px;
--ba-header-padding:0 20px;

/* title */
--ba-title-size:44px;
--ba-title-weight:900;
--ba-title-color:#fff;
--ba-title-spacing:-1px;

/* text */
--ba-text-margin:12px;
--ba-text-size:15px;
--ba-text-color:#9aa3ad;
--ba-text-line:1.6;

/* grid */
--ba-grid-width:1100px;
--ba-grid-padding:0 20px;
--ba-grid-columns:repeat(3,1fr);
--ba-grid-gap:20px;

/* cards */
--ba-card-bg:#111;
--ba-card-border:rgba(255,255,255,0.08);
--ba-card-radius:16px;

/* split image */
--ba-image-height:240px;

--ba-image-filter:
contrast(1.05)
brightness(0.9);

/* labels */
--ba-label-padding:10px 14px;

--ba-label-size:11px;
--ba-label-weight:800;
--ba-label-spacing:1px;

--ba-label-top-border:
rgba(255,255,255,0.06);

--ba-label-bottom-border:
rgba(255,255,255,0.06);

/* ONLY CHANGED COLORS */
--ba-before-color:#bfc6cf;
--ba-after-color:#4f86c6;

/* info */
--ba-info-padding:16px;

--ba-info-title-size:16px;
--ba-info-title-weight:800;
--ba-info-title-color:#fff;

--ba-info-text-margin:6px;
--ba-info-text-size:13px;
--ba-info-text-color:#9aa3ad;
--ba-info-text-line:1.5;

/* mobile */
--ba-mobile-title:34px;
--ba-mobile-image-height:220px;
}





/* =========================
   BEFORE / AFTER SECTION
========================= */

.ba-clean{

padding:var(--ba-padding) 0;

background:
var(--ba-bg);

}

/* HEADER */

.ba-header{

text-align:center;

max-width:var(--ba-header-width);

margin:var(--ba-header-margin);

padding:var(--ba-header-padding);

}

.ba-header h2{

font-size:var(--ba-title-size);

font-weight:var(--ba-title-weight);

color:var(--ba-title-color);

letter-spacing:var(--ba-title-spacing);

}

.ba-header p{

margin-top:var(--ba-text-margin);

font-size:var(--ba-text-size);

color:var(--ba-text-color);

line-height:var(--ba-text-line);

}

/* GRID */

.ba-grid{

max-width:var(--ba-grid-width);

margin:0 auto;

padding:var(--ba-grid-padding);

display:grid;

grid-template-columns:var(--ba-grid-columns);

gap:var(--ba-grid-gap);

}

/* CARD */

.ba-card{

background:var(--ba-card-bg);

border:1px solid var(--ba-card-border);

border-radius:var(--ba-card-radius);

overflow:hidden;

}

/* IMAGE SPLIT */

.ba-split{

display:flex;

height:var(--ba-image-height);

}

.ba-split img{

width:50%;

height:100%;

object-fit:cover;

filter:var(--ba-image-filter);

}

/* LABELS */

.ba-labels{

display:flex;

justify-content:space-between;

padding:var(--ba-label-padding);

font-size:var(--ba-label-size);

font-weight:var(--ba-label-weight);

letter-spacing:var(--ba-label-spacing);

border-top:
1px solid var(--ba-label-top-border);

border-bottom:
1px solid var(--ba-label-bottom-border);

}

.ba-labels .before{

color:var(--ba-before-color);

}

.ba-labels .after{

color:var(--ba-after-color);

}

/* INFO */

.ba-info{

padding:var(--ba-info-padding);

}

.ba-info h3{

font-size:var(--ba-info-title-size);

font-weight:var(--ba-info-title-weight);

color:var(--ba-info-title-color);

margin:0;

}

.ba-info p{

margin-top:var(--ba-info-text-margin);

font-size:var(--ba-info-text-size);

color:var(--ba-info-text-color);

line-height:var(--ba-info-text-line);

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

.ba-grid{

grid-template-columns:1fr;

}

.ba-split{

height:var(--ba-mobile-image-height);

}

.ba-header h2{

font-size:var(--ba-mobile-title);

}

}