.capabilities-page {
    color: #17243d;
}

.capabilities-service-hero {
    overflow: hidden;
    background-color: #031e39 !important;
    background-image: url('../img/backgrounds/capabilities-banner.png') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.capabilities-cards.container {
    width: calc(100% - 72px);
    max-width: 1464px;
}

.capabilities-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 20px;
}

.capabilities-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 16px 14px 12px;
    border: 1px solid #e0e5ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(16, 41, 67, .08);
}

.capabilities-card__icon {
    position: relative;
    width: 76px;
    height: 52px;
    margin-bottom: 8px;
    overflow: hidden;
}

    .capabilities-card__icon img {
        position: absolute;
        width: 1536px !important;
        max-width: none !important;
        height: auto;
    }

.capabilities-card__icon--tooling img {
    top: -401px;
    left: -56px;
}

.capabilities-card__icon--litz img {
    top: -401px;
    left: -365px;
}

.capabilities-card__icon--foil img {
    top: -401px;
    left: -656px;
}

.capabilities-card__icon--partner img {
    top: -401px;
    left: -943px;
}

.capabilities-card__icon--quality img {
    top: -401px;
    left: -1240px;
}

.capabilities-card h2 {
    min-height: 48px;
    margin: 0 0 8px;
    color: #17243d;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.capabilities-card p {
    min-height: 72px;
    margin: 0 0 12px;
    color: #455163;
    font-size: 15px;
    line-height: 1.4;
}

.capabilities-card__photo {
    position: relative;
    width: 100%;
    margin-top: auto;
    overflow: hidden;
    aspect-ratio: 1.4 / 1;
    border-radius: 6px;
    background: #edf2f6;
}

    .capabilities-card__photo img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        max-width: none !important;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

@media (max-width: 1100px) {
    .capabilities-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .capabilities-card h2 {
        min-height: 0;
    }

    .capabilities-card p {
        min-height: 60px;
    }
}

@media (max-width: 767px) {
    .capabilities-service-hero {
        background-size: 100% 100%, cover;
        background-position: center, right center;
    }

    .capabilities-cards.container {
        width: calc(100% - 32px);
    }

    .capabilities-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .capabilities-card {
        padding: 14px 12px 11px;
    }

        .capabilities-card h2 {
            font-size: 17px;
        }

        .capabilities-card p {
            min-height: 76px;
            font-size: 14px;
        }

}

@media (max-width: 480px) {
    .capabilities-cards {
        grid-template-columns: 1fr;
    }

    .capabilities-card p {
        min-height: 0;
    }
}