Разбираем лендинг от Геткурс: блок Несколько предложений

Описание: Для консультации по созданию или для заказа лендинга пишите: в ВК: https://vk.com/tehnosoroka - здесь также кое-что о том, как делать такие лендинги; в Телеграм: https://t.me/Sorokina_Elena_art; в инстаграм: @tehno_soroka: на почту: [email protected].

Когда рассмотрела поближе, оказалось, что код для :after и :before одинаковый, а поворот изображения расписан отдельно. Привожу итоговый код:

.lt-tsr-block.flex-column:before,
.lt-tsr-block.flex-column:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 30px;
top: -30px;
left: 0;
background: url('https://fs.getcourse.ru/fileservice/f...) no-repeat bottom center;
background-size: contain;
}

.lt-tsr-block.flex-column:after {
top: auto;
bottom: -30px;
-webkit-transform: rotate(180deg); /* поворот нижнего изображения */
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

/* верхняя граница для текста ↓ */
.price p {
border-top: 1px solid #e2e2e2;
padding: 8px 0;
letter-spacing: -0.2px;
text-align: left;
}