85 lines
2.4 KiB
CSS
85 lines
2.4 KiB
CSS
|
.article-item-main__rfo {
|
|||
|
|
position: relative;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
height: 409px;
|
|||
|
|
width: 790px; /* Новый размер по ширине SVG */
|
|||
|
|
background: #f1f3eb; /* пример фона */
|
|||
|
|
|
|||
|
|
clip-path: path('M8.79428 0.00442659L780.206 0.000136415C785.043 0.000137261 789 3.94997 789 8.778L789 34.6477L789 374.353L789 400.222C789 405.05 785.043 409 780.206 409L627.708 409C621.541 409 620.386 405.144 617.5 400.222L611.393 389.805C609.383 386.378 605.128 383.509 601.56 383.13L8.79426 383.135C3.95665 383.135 6.00491e-05 379.185 6.08933e-05 374.357L6.99763e-05 8.78198C7.08205e-05 3.95395 3.95667 0.00442574 8.79428 0.00442659Z');
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-content{
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-images{
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-images picture,
|
|||
|
|
.article-main-images img{
|
|||
|
|
display: block; /* Убирает лишние отступы у inline-элементов */
|
|||
|
|
height: 383px; /* Занимает 100% ширины родителя (.article-main-images) */
|
|||
|
|
width: 387px;
|
|||
|
|
object-fit: cover; /* Обрезает изображение под пропорции блока (опционально) */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-text{
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
padding-top: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
|
|||
|
|
.article-item-main__rfo {
|
|||
|
|
position: relative;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 100%; /* или любой нужный вам размер */
|
|||
|
|
aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */
|
|||
|
|
background: #f1f3eb;
|
|||
|
|
|
|||
|
|
clip-path: none;
|
|||
|
|
|
|||
|
|
/* Маска с сохранением пропорций */
|
|||
|
|
-webkit-mask-image: var(--article-main-mob);
|
|||
|
|
-webkit-mask-repeat: no-repeat;
|
|||
|
|
-webkit-mask-size: 100% 100%;
|
|||
|
|
mask-image: var(--article-main-mob);
|
|||
|
|
mask-repeat: no-repeat;
|
|||
|
|
mask-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.article-main-content{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 1rem 0.7rem 0 0.7rem
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-text{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-images{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-main-images picture,
|
|||
|
|
.article-main-images img{
|
|||
|
|
height: 21rem;
|
|||
|
|
width: 100%;
|
|||
|
|
object-fit: cover; /* Обрезает изображение под пропорции блока (опционально) */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|