есть див с inline-block - в инспекторе и на мобильных устройствах отображается правильно, но если уменьшить окно браузера, все съежает. В чем может быть причина?
<div class="instageneral"><!--
--><a class="popup-link" href="/"><div class="general">
<div class="content">
<div class="img_container">
<img src="https://oboi.ws/originals/original_8857_oboi_krasnye_barhany_pustyni_3000x2000.jpg">
</div>
<p class="instaheader">
Header
</p>
<p class="instatext" align="justify">
text
</p>
</div>
</div></a><!--
--><a class="popup-link" href="#"><div class="general">
<div class="content">
<div class="img_container">
<img src="https://oboi.ws/originals/original_8857_oboi_krasnye_barhany_pustyni_3000x2000.jpg">
</div>
<p class="instaheader">
Header
</p>
<p class="instatext" align="justify">
text
</p>
</div>
</div></a><!--
--><a class="popup-link" href="#"><div class="general">
<div class="content">
<div class="img_container">
<img src="https://oboi.ws/originals/original_8857_oboi_krasnye_barhany_pustyni_3000x2000.jpg">
</div>
<p class="instaheader">
header
</p>
<p class="instatext" align="justify">
text
</p>
</div>
</div></a>
</div>
:root {
--myW: 364px;
--myH: 500px;
--myMargin: 10px;
}
.instageneral {
margin: auto;
max-width: calc(var(--myW) * 3 + 68px);
min-height: 450px;
position: relative;
padding: 20px;
background: #eff3f5;
border-radius: 0px 0px 35px 35px;
}
.general {
cursor: pointer;
position: relative;
margin: var(--myMargin);
width: var(--myW);
height: var(--myH);
background: #fff;
display: inline-block;
transition: all 0.2s ease-in-out;
border-radius: 25px;
overflow: hidden;
box-sizing:border-box;
}
.general:hover {
transform: scale(1.04);
}
.content {
position: absolute;
margin: auto;
padding: 20px;
}
.instaheader {
width: 100%;
font-size: 22px;
margin-top: 15px;
margin-bottom: 7px;
}
.instatext {
width: 100%;
height: 50px;
-webkit-line-clamp: 2; /* Число отображаемых строк */
display: -webkit-box; /* Включаем флексбоксы */
-webkit-box-orient: vertical; /* Вертикальная ориентация */
overflow: hidden; /* Обрезаем всё за пределами блока */
font-weight: lighter;
}
.img_container {
width: 324px;
height: 324px;
}
.img_container img, .img_container video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-position: center;
pointer-events: none;
}
.instageneral h1 {
margin-bottom: 25px;
color: #2b3134;
font-size: 36px;
}
@media screen and (max-width: 1199px) {
:root {
--myMargin: 0;
}
.instageneral {
margin: auto;
max-width: none;
padding: 0;
padding-top: 20px;
border-radius: 0;
}
.general {
width: calc(100vw / 2 - 9px);
height: calc(100vw / 2 - 9px); /*var(--myH); */
border-radius: 0;
font-size:0;
line-height:0;
transition: none;
margin: 0 0 2px 6px;
}
.general:hover {
transform: none;
}
.img_container {
width: calc(100vw / 2 - 9px);
height: calc(100vw / 2 - 9px);
}
.content {
padding: 0px;
}
.instaheader {
display: none;
}
.instatext {
display: none;
}
}
</style>