.clients {
    background: var(--bg);
    padding: 0 0 6cqw;
}

.clients__title {
    font-size: 2.6cqw;
    line-height: 1.2;
    text-align: start;
    max-width: 45%;
    margin: 0 0 2.5cqw;
}

.clients__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1cqw;
}

/*
 * The pool mixes logos made for light backgrounds (Saudi Aramco and Lukoil are
 * near-black on transparent) with self-contained ones, so every tile gets a
 * light plate — otherwise a third of the wall disappears on --bg.
 */
.clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 1;
    padding: 3.5cqw;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
}

.clients__item img {
    max-width: 75%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .55;
    transition: filter var(--transition), opacity var(--transition);
}

.clients__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* No hover on touch screens — show the logos as they are */
@media (hover: none) {
    .clients__item img {
        filter: grayscale(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .clients {
        padding: 0 0 10cqw;
    }

    .clients__title {
        font-size: 4.5cqw;
        max-width: 80%;
        margin: 0 0 5cqw;
    }

    .clients__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5cqw;
    }

    .clients__item {
        padding: 3cqw;
    }
}

@media (max-width: 590px) {
    .clients__title {
        font-size: 5.5cqw;
        max-width: 100%;
        margin: 0 0 6cqw;
    }

    .clients__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.5cqw;
    }

    .clients__item {
        padding: 4cqw;
        border-radius: 2cqw;
    }
}