.homepage-client-logos-section {
    padding: 100px 0;
    background: #000;
}
.homepage-clients-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 2rem;
}
.homepage-client-logos-header {
    padding: 20px 0 20px 40px;
    margin-bottom: 72px;
    border-left: 2px solid var(--primary-color);
}
.homepage-client-logos-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-wrap: wrap;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: minmax(260px, 1fr);
    align-content: flex-start;
    display: grid;
    margin-top: 40px;
    margin-bottom: 40px;
}
.clients-card {
    background: #1C1C1CCC;
    border-radius: 8px;
    overflow: hidden;
    cursor: none;
    transition: background .4s;
    width: 100%;
    pointer-events: auto;
    /* opacity: 0.8; */
}
.clients-card:hover {
    /* opacity: 1; */
    background: #262626;
}
.clients-card__image {
    aspect-ratio: 3 / 2;
    mix-blend-mode: lighten;
    object-fit: contain;
    height: auto;
}
.clients-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
/* Mobile phones - 2 columns with 15px margins and 10px gap */
@media (max-width: 767px) {
    .homepage-client-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
}

/* Tablets - 4 columns with 15px margins and 10px gap */
@media (min-width: 768px) and (max-width: 1024px) {
    .homepage-client-logos-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
}