Есть вот такой код, написанный на less:
.portfolio-panel-background {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 50%;
transition: 1s;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
&--active {
width: 2000px;
height: 2000px;
transform: translate(-35%, -52%);
@media screen and (max-width: 1850px) {
width: 1600px;
height: 1600px;
}
@media screen and (max-width: 1570px) {
width: 1200px;
height: 1200px;
}
}
}
Почему верхний media-запрос (@media screen and (max-width: 1850px)
) перебивает нижний?
Вот так выглядит код после компиляции:
@media screen and (max-width:1570px) {
.portfolio-panel-background--active {
width: 1200px;
height: 1200px
}
}
@media screen and (max-width:1850px) {
.portfolio-panel-background--active {
width: 1600px;
height: 1600px
}
}
Пробовал в Less коде переставлять местами, т.е. чтобы (@media screen and (max-width: 1850px)
) был ниже, но это не помогает, в чем проблема?