/* Стили для блока изображения с классом size-large */
.size-large-stretched {
    max-width: 98%; /* Устанавливаем ширину блока в 98% */
    margin: 0 auto; /* Центрируем блок */
    padding-bottom: 20px; /* Отступ снизу */
}

/* Стили для изображения внутри блока size-large */
.size-large-stretched img,
img.size-large-stretched {
    width: 70vw; /* Растягиваем изображение до 70% ширины окна */
    max-width: 100%; /* Ограничиваем изображение шириной родителя */
    height: auto; /* Сохраняем пропорции изображения */
    display: block; /* Убираем лишние отступы под изображением */
    margin: 0 auto; /* Центрируем изображение */
    border-radius: 16px; /* Закругление углов */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Добавляем тень */
}


/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .size-large-stretched img,
    img.size-large-stretched {
        width: 90vw; /* Увеличиваем ширину изображения на мобильных устройствах */
        max-width: 98%; /* Ограничиваем ширину родителя */
        border-radius: 12px; /* Немного уменьшаем радиус закругления */
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
    }

    .size-large-stretched {
        padding-bottom: 15px; /* Уменьшаем отступ снизу */
    }
}

@media (max-width: 480px) {
    .size-large-stretched img,
    img.size-large-stretched {
        width: 100%; /* Полная ширина на самых маленьких устройствах */
        border-radius: 8px; /* Ещё меньше радиус закругления */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Более лёгкая тень */
    }

    .size-large-stretched {
        padding-bottom: 10px; /* Ещё меньше отступ снизу */
    }
}