:root {
    /* =========================
   ABOUT
========================= */

/* sekce */
--about-padding:110px;
--about-bg:#0b0c0e;
--about-text-color:#d7dbe0;

/* layout */
--about-grid-ratio-left:1.15fr;
--about-grid-ratio-right:0.85fr;
--about-grid-gap:60px;
--about-text-width:680px;

/* badge */
--about-badge-size:10px;
--about-badge-spacing:2px;
--about-badge-color:#4f86c6;
--about-badge-margin:12px;
--about-badge-opacity:0.9;

/* H2 */
--about-title-size:44px;
--about-title-weight:900;
--about-title-line-height:1.1;
--about-title-margin:16px;
--about-title-spacing:-0.5px;

/* lead */
--about-lead-size:15px;
--about-lead-color:#c9d0d8;
--about-lead-line-height:1.7;
--about-lead-margin:12px;

/* text */
--about-text-size:14px;
--about-text-color-secondary:#9aa3ad;
--about-text-line-height:1.8;

/* trust */
--about-trust-margin:36px;
--about-trust-gap:26px;
--about-trust-padding:18px;
--about-trust-border:rgba(255,255,255,0.06);

--about-trust-number-size:15px;
--about-trust-number-weight:800;
--about-trust-number-color:#ffffff;
--about-trust-number-margin:5px;

--about-trust-line-width:22px;
--about-trust-line-height:2px;
--about-trust-line-color:#4f86c6;
--about-trust-line-margin:7px;
--about-trust-line-opacity:0.8;

/* trust text */
--about-trust-text-size:13px;
--about-trust-text-color:#9aa3ad;

/* image */
--about-image-radius:16px;
--about-image-shadow:
0 18px 55px rgba(0,0,0,0.45);

--about-image-brightness:0.92;
--about-image-contrast:1.05;

/* mobile */
--about-mobile-gap:36px;
--about-mobile-title-size:32px;
--about-mobile-lead-size:14px;
--about-mobile-text-size:13px;
--about-mobile-trust-gap:14px;
}



/* =========================
   ABOUT — CLEAN WORKSHOP STYLE
========================= */

.about{

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

    background:
    linear-gradient(
        180deg,
        var(--about-bg) 100%
    );

    color:var(--about-text-color);
}

/* =========================
   LAYOUT
========================= */

.about-wrapper{

    display:grid;

    grid-template-columns:
    var(--about-grid-ratio-left)
    var(--about-grid-ratio-right);

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

    align-items:center;
}

/* =========================
   TEXT BLOCK
========================= */

.about-text{

    max-width:var(--about-text-width);
}

.about-badge{

    font-size:var(--about-badge-size);

    letter-spacing:
    var(--about-badge-spacing);

    color:
    var(--about-badge-color);

    margin-bottom:
    var(--about-badge-margin);

    text-transform:uppercase;

    opacity:
    var(--about-badge-opacity);
}


/* H2 */

.about h2{

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

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

    line-height:
    var(--about-title-line-height);

    margin-bottom:
    var(--about-title-margin);

    letter-spacing:
    var(--about-title-spacing);
}


/* lead */

.about .lead{

    font-size:
    var(--about-lead-size);

    color:
    var(--about-lead-color);

    line-height:
    var(--about-lead-line-height);

    margin-bottom:
    var(--about-lead-margin);
}


/* text */

.about p{

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

    color:
    var(--about-text-color-secondary);

    line-height:
    var(--about-text-line-height);
}


/* =========================
   TRUST
========================= */

.about-trust{

    margin-top:
    var(--about-trust-margin);

    display:flex;

    gap:
    var(--about-trust-gap);

    padding-top:
    var(--about-trust-padding);

    border-top:
    1px solid
    var(--about-trust-border);
}

.trust-item{

    flex:1;

    font-size:
    var(--about-trust-text-size);

    color:
    var(--about-trust-text-color);
}


/* číslo */

.trust-item span{

    display:block;

    font-size:
    var(--about-trust-number-size);

    font-weight:
    var(--about-trust-number-weight);

    color:
    var(--about-trust-number-color);

    margin-bottom:
    var(--about-trust-number-margin);
}


/* linka */

.trust-item::before{

    content:"";

    display:block;

    width:
    var(--about-trust-line-width);

    height:
    var(--about-trust-line-height);

    background:
    var(--about-trust-line-color);

    margin-bottom:
    var(--about-trust-line-margin);

    opacity:
    var(--about-trust-line-opacity);
}


/* =========================
   IMAGE
========================= */

.about-image{

    border-radius:
    var(--about-image-radius);

    overflow:hidden;

    box-shadow:
    var(--about-image-shadow);
}

.about-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    filter:
    brightness(var(--about-image-brightness))
    contrast(var(--about-image-contrast));
}


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

@media(max-width:900px){

.about-wrapper{

grid-template-columns:1fr;

gap:
var(--about-mobile-gap);
}

.about h2{

font-size:
var(--about-mobile-title-size);
}

.about .lead{

font-size:
var(--about-mobile-lead-size);
}

.about p{

font-size:
var(--about-mobile-text-size);
}

.about-trust{

flex-direction:column;

gap:
var(--about-mobile-trust-gap);
}

}