/* Карточка товара: «Характеристики» и «Описание» — один блок в HTML (раньше копия для компьютера и копия для телефона).
   В разметке блок стоит после вариантов — так он и идёт на телефоне; на компьютере сетка переносит его влево. */

@media (min-width: 1051px) {
    /* варианты с фото: блок в левой колонке под фото, варианты справа на всю высоту */
    .tovar__block--info {
        display: grid;
        grid-template-columns: 520px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 30px;
        row-gap: 0;
        align-items: start;
    }

    .tovar__block--info > .tovar__block-left {
        grid-column: 1;
        grid-row: 1;
    }

    .tovar__block--info > .tovar__block-right {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .tovar__block--info > .tovar__info {
        grid-column: 1;
        grid-row: 2;
    }

    /* варианты без фото: блок слева от вариантов */
    .tovar__nofoto > .tovar__info {
        order: -1;
    }
}

@media (min-width: 1051px) and (max-width: 1150px) {
    .tovar__block--info {
        grid-template-columns: 420px minmax(0, 1fr);
    }
}

@media (max-width: 1050px) {
    /* блок идёт после вариантов с тем же отступом, что и раньше внутри правой колонки */
    .tovar__block--info > .tovar__info {
        width: 100%;
        margin-top: 0;
    }

    .tovar__nofoto {
        flex-direction: column;
    }
}

/* планшет: колонки здесь разделены отступом 30px — забираем его, чтобы блок не отъезжал от вариантов */
@media (min-width: 769px) and (max-width: 1050px) {
    .tovar__block--info > .tovar__info {
        margin-top: -20px;
    }
}
