/* Предполагаем, что body и .container уже стилизованы */
/* body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Светло-серый фон страницы */
/*    color: #333;
    margin: 0;
}

.container {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
} */

.partners-section {
    padding: 60px 0;
    background-color: #f8f9fa; /* Светло-серый фон для этой секции */
}

.section-title-partners {
    font-size: 2em; /* Размер заголовка */
    font-weight: bold;
    color: #212529; /* Темный цвет заголовка */
    text-align: left; /* Выравнивание по левому краю, как на скриншоте */
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 40px;
}

.partners-grid {
    display: grid;
    /* 4 колонки, как на скриншоте */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 40px; /* Вертикальный и горизонтальный отступ */
    align-items: center; /* Выравнивание логотипов по центру ячейки по вертикали */
}

.partner-logo-item {
    display: flex; /* Для центрирования содержимого (самого логотипа в ссылке) */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    min-height: 80px; /* Минимальная высота ячейки для выравнивания */
    /* background-color: #fff; */ /* Если нужен белый фон для каждой ячейки лого */
    /* padding: 15px; */ /* Если нужен отступ внутри ячейки */
    /* border-radius: 8px; */ /* Если нужно скругление для ячеек */
}

.partner-logo-item a {
    display: inline-block; /* Чтобы ссылка не занимала всю ширину ячейки без нужды */
    transition: opacity 0.3s ease;
}

.partner-logo-item a:hover {
    opacity: 0.7; /* Легкое затемнение при наведении */
}

.partner-logo-item img {
    max-width: 100%; /* Чтобы логотип не вылезал за пределы контейнера */
    max-height: 150px; /* Максимальная высота логотипа, подберите под свои лого */
    height: auto; /* Сохраняем пропорции */
    width: auto;  /* Сохраняем пропорции, если логотип широкий */
    object-fit: contain; /* Чтобы логотип вписывался, а не растягивался/обрезался */
}

/* Если последний ряд неполный, и нужно последний элемент центрировать (для 13-го элемента в сетке из 4 колонок) */
.encore-logo {
    /* Если 13-й элемент, то он будет первым в 4-м ряду */
    /* Для его центрирования, если он один в ряду в сетке из 4х колонок: */
    /* grid-column: 2 / span 2; */ /* Займет 2-ю и 3-ю колонку, т.е. будет по центру */
    /* Этот вариант лучше, если есть строго 13 элементов */
}
/* Или, если последний ряд может содержать 1, 2 или 3 элемента, можно оставить как есть,
   они просто выровняются по сетке. */


/* Адаптивность */
@media (max-width: 992px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки */
        gap: 25px 30px;
    }
    /* Если был 13-й элемент и он был центрирован для 4-х колонок,
       то для 3-х колонок он будет последним в ряду, и это нормально.
       Или, если нужно его центрировать, если он один:
    .encore-logo {
        grid-column: 2 / span 1; // Займет центральную из 3х колонок
    }
    */
}

@media (max-width: 768px) {
    .section-title-partners {
        text-align: center; /* На мобильных заголовок можно по центру */
        font-size: 1.8em;
    }
    .partners-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        gap: 20px;
    }
    .partner-logo-item img {
        max-height: 50px;
    }
    /* Центрирование последнего элемента, если он один в ряду из 2-х колонок */
    /* .encore-logo {
        grid-column: 1 / span 2;
        justify-content: center;
    } */
    /* Однако, если .encore-logo не всегда последний, такая логика не сработает без JS.
       Проще оставить выравнивание по сетке. */
}

@media (max-width: 480px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr); /* Можно оставить 2 или сделать 1 */
        gap: 20px 15px;
    }
    .partner-logo-item img {
        max-height: 45px;
    }
}