.hero {

    width: 100%;

    height: 500px;

	background: url('../img/gallery/3.jpg') no-repeat center center / cover;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.hero h1 {

    font-family: "Nunito";

    font-style: normal;

    font-weight: 900;

    font-size: 48px;

    line-height: 70px;

    color: #fff

}



.hero__crumbs {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    font-family: "Nunito";

    font-style: normal;

    font-weight: 400;

    font-size: 20px;

    line-height: 115%;

    text-align: center;

    color: #fff;

    gap: 40px

}



.hero__crumbs a {

    position: relative

}



.hero__crumbs a::before {

    content: "";

    width: 1px;

    height: 14px;

    background: #fff;

    position: absolute;

    right: -20px;

    top: 5px

}



.gallery {

    padding-bottom: 50px

}



.gallery a {

    max-width: 322px;

    -o-object-fit: cover;

    object-fit: cover

}



.gallery__card--item {

    width: 322px;

    height: 270px

}



.gallery__card--item img {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    border-radius: 10px

}



.gallery__more {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-top: 30px

}



.gallery__more a {

    width: 141px;

    height: 50px;

    background: #f39307;

    border-radius: 100px;

    font-family: "Nunito";

    font-style: normal;

    font-weight: 700;

    font-size: 15px;

    line-height: 20px;

    color: #fff;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-transition: all .2s ease;

    -o-transition: all .2s ease;

    transition: all .2s ease

}



.gallery__more a:hover {

    background: #fff;

    border: 1px dashed #f39307;

    color: #f39307

}



.gallery {

    margin-top: 50px

}



.gallery .row {

    --bs-gutter-y: 25px

}



@media(max-width: 576px) {

    .hero {

        height: 254px

    }



    .hero h1 {

        margin-top: 50px;

        font-size: 20px;

        line-height: 30px

    }



    .hero__crumbs {

        font-size: 14px;

        line-height: 16px

    }



    .hero__crumbs a::before {

        top: 0

    }

}