Насколько можно упростить этот код? ⇐ CSS

[Гость]

Впервые использую сетку, это код из дизайна всплывающего окна веб-сайта.

.pop-up { фон: #18391F; цвет: #F4EBE4; дисплей: сетка; Grid-template-areas: "item1 item4 item4 item4"; } @media (максимальная ширина: 800 пикселей) { .неожиданно возникнуть { Grid-template-areas: "item4 item4 item4 item4" "item1..."; } .item4 { высота: 200 пикселей; размер фона: содержать; } } .элемент { поле: 2 пикселя; отступ: 40 пикселей; } .item1 { область сетки: item1; } .item4 { область сетки: item4; фон: URL-адрес (https://www.emotedigital.com.au/wp-cont ... rame-1.png); размер фона: обложка; } .функции { дисплей: гибкий; оправдание-содержание: пространство между; ширина: 55%; граница-верх: 1 пиксель сплошной #F4EBE4; нижняя граница: сплошная 1 пиксель #F4EBE4; } .функции п { отступ: 0 пикселей 10 пикселей 0 пикселей 10 пикселей; } .значки>div { дисплей: гибкий; } .close-btn>кнопка { отступы: 15 пикселей 25 пикселей 15 пикселей 25 пикселей; радиус границы: 60 пикселей; фон: белый; цвет: #18391F; граница: нет; вес шрифта: 800; Бесплатное мероприятие | Всем добро пожаловать
Мы откажем вашу семейную плату за регистрацию
Когда вы зарегистрируетесь в Hawthorn, наш Glen Iris на дне открытых дверей.

Вечеринка с барбекю

Корзина с кофе

Детские мероприятия

Раскраска лица



Суббота, 21 октября



Гленферри Роуд, 555, Хоторн



с 10:00 до 13:00
ЗАКРЫТЬ
Я хочу знать свои ошибки и то, как я могу написать этот код более эффективно и результативно. Я чувствую, что не использовал сетку наилучшим образом и не понимаю, нужен ли гибкий дисплей или нет.

Любая помощь будет оценена по достоинству