.materials { width: 100%; line-height: 1.2; margin-bottom: 35px;}
.materials__head,
.materials__row {
    display: grid;
    grid-template-columns: 420px 1fr 220px 140px;
    column-gap: 24px;
}
.materials__head {
    padding: 14px 0;
    border-bottom: 2px solid #afe2e3;
    color: #6c7a7d;
    font-size: 14px;
}
.materials__row {
    padding: 22px 0;
    border-bottom: 2px solid #afe2e3;
    align-items: center;
}
.materials__name { display: flex; gap: 18px; align-items: center; color: #064240;}
.materials__img { flex: 0 0 86px; width: 86px; } /* чтобы картинка не растягивалась */
.materials__img img { width: 100%; height: auto; display: block; }
.materials__title { font-weight: 600; }
.materials__desc { color: #3c4a4d; }
.materials__meta { color: #3c4a4d; }

/* ====== <= 1200px (ноут/планшет горизонтально) ====== */
@media (max-width: 1200px) {
    .materials__head,
    .materials__row {
        grid-template-columns: 360px 1fr 190px 120px;
        column-gap: 18px;
    }
    .materials__img { flex-basis: 72px; width: 72px; }
}

/* ====== <= 992px (планшет) ====== */
@media (max-width: 992px) {
    .materials__head,
    .materials__row {
        grid-template-columns: 320px 1fr 160px 110px;
        column-gap: 14px;
    }
    .materials__head { font-size: 13px; }
    .materials__row { padding: 18px 0; }
}

/* ====== <= 768px (мобилка/планшет вертикально) ====== */
@media (max-width: 768px) {
    .materials__head { display: none; }

    .materials__row {
        grid-template-columns: 1fr;
        row-gap: 10px;
        padding: 16px 0;
        align-items: start;
    }

    /* имя + описание блоками */
    .materials__name { align-items: flex-start; }
    .materials__img { flex: 0 0 64px; width: 64px; }

    /* мета и скачать — в одну строку, 2 колонки */
    .materials__col--meta,
    .materials__col--download {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 12px;
    }
}

/* ====== <= 480px (узкие мобилки) ====== */
@media (max-width: 480px) {
    .materials__img { flex: 0 0 52px; width: 52px; }
    .materials__row { padding: 14px 0; }
    .materials__col--meta,
    .materials__col--download {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
}