/* ==========================================
   HERO
========================================== */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.hero-image{

    width:100%;
    height:100%;

}

.hero-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;
    align-items:center;

}

.hero-content{

    max-width:40rem;

}

.hero-title{

    margin:0;

    font-size:clamp(3rem,7vw,7rem);

    line-height:.95;

    font-weight:700;

    color:#fff;

}

.hero-button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-top:3rem;

    padding:1rem 2rem;

    border:1px solid rgba(255,255,255,.7);

    color:#fff;

    backdrop-filter:blur(10px);

    transition:.25s;

}

.hero-button:hover{

    background:#fff;
    color:#111;

}



.hero{
    position:relative;
    z-index:1;
}

.hero-overlay{
    z-index:1;
}

/* ==========================================
   HOME
========================================== */

.home-commercial{

    padding:8rem 0;

}

.section-heading{

    max-width:42rem;

    margin-bottom:4rem;

}

.section-heading h2{

    margin:0 0 1rem;

    font-size:clamp(2rem,4vw,4rem);

    line-height:1;

}

.section-heading p{

    margin:0;

    font-size:1.1rem;

    line-height:1.7;

    color:#666;

}

.home-commercial-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
/*    grid-auto-rows:8vw;*/
    gap:1rem;
}

.commercial-item{

    position:relative;

    overflow:hidden;

    display:block;

    aspect-ratio:4/5;

}

.commercial-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.commercial-overlay{

    position:absolute;
    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:2rem;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.15),
        transparent
    );

    opacity:0;

    transition:.35s;

}

.commercial-category{

    font-size:.75rem;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:rgba(255,255,255,.8);

    margin-bottom:.5rem;

}

.commercial-title{

    color:#fff;

    font-size:1.35rem;

    font-weight:600;

}

/*.commercial-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:2rem;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        transparent 60%
    );

    opacity:0;

    transition:.35s;

} */

.commercial-title{

    color:#fff;

    font-size:1.2rem;

    font-weight:600;

}

.commercial-item:hover img{

    transform:scale(1.04);

}

.commercial-item:hover .commercial-overlay{

    opacity:1;

}


/* Большие и маленькие карточки */

.home-commercial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1rem;

}

.commercial-item{

    aspect-ratio:4/5;

}

/**/

@media (max-width:900px){

.home-commercial-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    grid-auto-rows:auto;

    gap:1rem;

}

.home-commercial-grid .commercial-item{
    grid-column:auto !important;
    grid-row:auto !important;
    height:auto;
    aspect-ratio:4 / 5;
}

}


@media (max-width:700px){

.home-commercial-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:1rem;
}

.home-commercial-grid .commercial-item{

    grid-column:auto !important;
    grid-row:auto !important;

    width:100%;
    height:auto;

    aspect-ratio:4 / 5;

}

.commercial-item img{

    width:100%;
    height:100%;
    object-fit:cover;

}

}