как можно прописать нужна структура
<div class="grid">
<div class="image"><img src=""></div>
<div class="image"><img src=""></div>
<div class="image"><img src=""></div>
</div>.layout {
width: 1660px;
+ max-width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
row-gap: 100px;
margin: auto;
}.layout {
- width: 1660px;
+ width: 100%;
+ max-width: 1660px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
row-gap: 100px;
margin: auto;
}form:has(:invalid) button {
display: none;
}<button>Small</button>
<button>Very long text</button>
<button>Lorem ipsum dolor sit amet consectetur</button>
window.addEventListener('scroll', function () {
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
document.body.classList.toggle('scrolled', currentScrollTop > 0)
});body.scrolled.topbar__bottom-consult {
opacity: 0;
transition: 0.3s ease;
}
body.scrolled .topbar__bottom-consult {
opacity: 1;
}position:sticky.topbar__bottom {
position: sticky;
top: 0;
}pointer-events: none; - блок с таким стилем "невидим" для указателя (мышки), и никак на нее не реагирует
grid-template-columns: 100px repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);
@media screen and (hover: none) and (orientation: portrait){
body::after {
content: 'Поверните телефон в горизонтальное положение';
z-index: 999999;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
}