вот мой код:
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url("https://i.ibb.co/vXqDmnh/background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
box-shadow: inset 120px 100px 250px black, inset -120px -100px 250px black;
}
}
@media only screen and (max-width: 960px) {
.showcase {
height: 70vh;
}
.hide-sm {
display: none;
}
.showcase-top img {
top: 30%;
left: 5%;
transform: translate(0);
}
.showcase-content {
h1 {
font-size: 3.5rem;
line-height: 1;
}
}
}
Здесь только класс (.hide-sm) работает, но другие классы не работают. Я пытался увидеть, используя chrome dev инструменты, но это показывает, что оригинальный стиль не изменился. Может кто-нибудь помочь мне разобраться с этой проблемой?