/* Стилі карток обладнання - точно як у оригіналі з Vodogray/equipment.html */

.eq {
    padding-top: 140px !important;
    margin-top: 100px !important;
}

@media only screen and (max-width: 1200px) {
    .eq {
        padding-top: 20px !important;
    }
}

.eq-list {
    display: grid !important;
    grid-template-columns: repeat(
        auto-fill,
        minmax(calc((100% / 4) - 60px), 1fr)
    ) !important;
    grid-gap: 135px 60px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    align-items: stretch !important;
}

/* Гарантовано розтягувати елемент-картку на повну висоту треку */
.eq-list > .eq-item {
    /* без примусової висоти — як у зразку */
}

@media screen and (max-width: 1200px) {
    .eq-list {
        grid-template-columns: repeat(
            auto-fill,
            minmax(calc(100% / 2 - 60px), 1fr)
        ) !important;
    }
}

@media screen and (max-width: 980px) {
    .eq-list {
        grid-template-columns: repeat(
            auto-fill,
            minmax(calc(100% / 2 - 60px), 1fr)
        ) !important;
    }
}

@media screen and (max-width: 700px) {
    .eq-list {
        grid-template-columns: repeat(
            auto-fill,
            minmax(calc(100% / 1 - 60px), 1fr)
        ) !important;
    }
}

.eq-list img {
    max-width: 100% !important;
    display: block !important;
}

@media only screen and (max-width: 1200px) {
    .eq-list {
        grid-gap: 40px !important;
    }
}

.eq-item__photo {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    position: relative !important;
}

.eq-item__photo img {
    width: 100% !important;
    display: block !important;
}

.eq-item__photo b {
    width: 100% !important;
    display: block !important;
    padding: 0 20px !important;
    font-size: 28px !important;
    line-height: 38px !important;
    color: #fff !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: absolute !important;
}

.eq-item {
    position: relative !important;
    padding-bottom: 80px !important; /* резерв місця під кнопку */
}

/* Без фіксованої висоти фото — як у зразку */
.eq-item__photo {
}

.eq-item__photo img {
}

.eq-item__info {
    font-size: 19.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-top: 40px !important;
}

@media only screen and (max-width: 720px) {
    .eq-item__info {
        margin-top: 30px !important;
    }
}

.eq-item__btn {
    width: 255px !important;
    height: 55px !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    background: #1892ed !important;
    color: #fff !important;
    font-size: 22px !important;
    grid-gap: 10px !important;
    -webkit-border-radius: 100px !important;
    border-radius: 100px !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important;
    -webkit-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}

.eq-item__btn:hover {
    background: #e55725 !important;
}

.eq-bg {
    width: 1920px !important;
    position: absolute !important;
    left: -280px !important;
    top: -280px !important;
}

@media only screen and (max-width: 1200px) {
    .eq-bg {
        width: 1120px !important;
        left: -280px !important;
        top: -190px !important;
    }
}

@media only screen and (max-width: 720px) {
    .eq-bg {
        top: -170px !important;
    }
}

.eq-seo {
    padding: 180px 0 100px !important;
    background: url("../images/bg/equipment-seo-bg.png") top left no-repeat !important;
    -webkit-background-size: cover !important;
    background-size: cover !important;
    margin-top: 260px !important;
}

@media only screen and (max-width: 1400px) {
    .eq-seo {
        margin-top: 150px !important;
    }
}

@media only screen and (max-width: 1200px) {
    .eq-seo {
        margin: 80px 0 -20px !important;
        padding-top: 110px !important;
    }
}

@media only screen and (max-width: 720px) {
    .eq-seo {
        margin-top: 50px !important;
        padding: 90px 0 60px !important;
    }
}

.eq-seo__content h2 {
    color: #e55725 !important;
    font-size: 25px !important;
    line-height: 30px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin: 20px 0 !important;
}

.eq-seo__content h3 {
    font-size: 20px !important;
    line-height: 28px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

.eq-seo__content p {
    font-size: 20px !important;
    line-height: 28px !important;
}