/*==================================================
    FLEET PAGE HERO
==================================================*/

.fleet-page-hero{

    min-height:430px;

    display:flex;

    align-items:center;

    background:
        linear-gradient(
            90deg,
            rgba(10,15,25,.90),
            rgba(10,15,25,.55)
        ),
        url('../images/hero/fleet-hero.jpg')
        center/cover no-repeat;

    color:#fff;

}

.fleet-page-hero-content{

    max-width:720px;

    padding-top:70px;

}

.fleet-page-hero h1{

    margin:12px 0 20px;

    color:#fff;

    font-size:clamp(38px,5vw,64px);

    line-height:1.08;

    font-weight:800;

}

.fleet-page-hero h1 span{

    display:block;

    color:var(--primary);

}

.fleet-page-hero p{

    max-width:620px;

    margin:0;

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

    font-size:16px;

    line-height:1.8;

}


/*==================================================
    FLEET PAGE
==================================================*/

.fleet-page{

    background:var(--surface);

}

.fleet-page-heading{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:40px;

}

.fleet-result-count{

    color:var(--text);

    font-size:14px;

    font-weight:600;

}


/*==================================================
    FILTER
==================================================*/

.fleet-page-filter{

    margin-bottom:45px;

}


/*==================================================
    GRID
==================================================*/

.fleet-page-grid{

    display:grid;

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

    gap:25px;

}

.fleet-page-item{

    min-width:0;

}


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

@media(max-width:1200px){

    .fleet-page-grid{

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

    }

}

@media(max-width:992px){

    .fleet-page-hero{

        min-height:380px;

    }

    .fleet-page-grid{

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

    }

}

@media(max-width:768px){

    .fleet-page-heading{

        flex-direction:column;

        align-items:flex-start;

        margin-bottom:30px;

    }

    .fleet-page-grid{

        gap:18px;

    }

}

@media(max-width:576px){

    .fleet-page-hero{

        min-height:360px;

    }

    .fleet-page-grid{

        grid-template-columns:1fr;

    }

}