.social {
    display: flex;
    flex-direction: row;
    /* nowrap + сжимаемые карточки: раньше отступы margin 0 32px делали
       строку шире контейнера (3 × 393 = 1179 > 1165), и она переносилась
       «пирамидкой» 2 + 1. Теперь зазор задаёт gap, а карточки ужимаются. */
    flex-wrap: nowrap;
    gap: 32px;
    justify-content: center;
    margin-bottom: 67px;
    min-height: 250px;
    transition: transform var(--transition);
}

.social > a {
    flex: 0 1 329px;
    min-width: 0;
}

.social-block{
    box-sizing: border-box;
    width: 100%;
    height: 168px;
    opacity: 1;
    border-radius: 24px;
    margin: 0;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: left;
}

.social-block span{
    color: white;
    /* font-weight: 400;
    font-style: Medium;
    font-size: 36px;
    line-height: 34px;
    letter-spacing: 0px; */
}

.tiktok{
    background: linear-gradient(90.24deg, #5B5B5B 1.06%, #191919 99.79%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.tiktok img, 
.instagram img, 
.youtube img{
    height: 192px;
    width: 192px;
    transform: translateY(-34px) ;
    transition: 0.5s;
}

.tiktok img:hover, 
.instagram img:hover, 
.youtube img:hover{
    transform: translateY(-44px);
    transition: 0.5s;
}

.instagram{
    background: linear-gradient(90deg, #B13A90 0%, #465BE1 100%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.youtube{
    background: linear-gradient(90deg, #FF7471 0%, #F62B29 100%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}
/* Три карточки держим в строку, пока каждая не уже ~240px (в неё должна
   помещаться картинка 192px). Ниже — сразу по одной в ряд: при переносе
   трёх элементов всегда получается «пирамидка» 2 + 1. */
@media (max-width: 900px) {
    .social {
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 40px;
        min-height: 0;
    }
    /* max-width на самом flex-элементе не помогает: перенос считается по
       уже ограниченному размеру, и в строку снова влезали две карточки.
       Поэтому ширину ограничиваем внутри, а ссылку центрируем. */
    .social > a {
        flex: 0 0 100%;
        max-width: none;
        display: flex;
        justify-content: center;
    }
    .social-block {
        max-width: 329px;
    }
}