body::before{
content: '';
position: fixed;
top: -150px;
left: -150px;
width: 400px;
height: 400px;
background: #F25A2B;
filter: blur(300px);
opacity: 0.6;
z-index: 0;
pointer-events: none;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: #0d0d0d;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
display: flex;
flex-direction: column;
}
.header{
height: 160px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.header img{
max-height: 60px;
}
main{
flex-grow: 1;
display: flex;
box-sizing: border-box;
min-height: 0;
z-index: 1;
}
.container{
display: flex;
gap: 20px;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 20px;
}
.block{
flex: 1;
position: relative;
cursor: pointer;
overflow: hidden;
text-decoration: none;
color: white;
border-radius: 8px;
}
.block::after{
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
pointer-events: none;
z-index: 1;
}
.block img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.block:hover img{
transform: scale(1.05);
}
.note{
position:absolute;
top:12px;
right:16px;
font-size:11px;
opacity:.2;
z-index:10;
}
.caption{
position: absolute;
bottom: 35px;
width: 100%;
text-align: center;
font-size: 18px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
pointer-events: none;
z-index: 2;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;            
}
.block:hover .caption{
color:#F25A2B;
}        
.block .logo{
width:160px;
height:72px;
background:url(../img/mapsted-logo.png) no-repeat left top;
background-size:contain;
position: absolute;
top:0px;
width: 100%;
z-index: 3;
}
.footer{
height: 120px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #888;
z-index: 1;
}

@media (max-width: 900px) {
    body {
    overflow: auto;
    height: auto;
    }
    .header {
    height: 100px;
    }
    .header img {
    max-height: 40px;
    }            
    main {
    padding: 0 10px;
    }
    .container {
    flex-direction: column;
    gap: 15px;
    }
    .block {
    height: 200px;
    }
    .note{
    position:absolute;
    top:8px;
    right:8px;
    font-size:9px;
    opacity:.3;
    z-index:10;
    width:80px;
    text-align:right;
    }
    .caption {
    font-size: 14px;
    bottom: 9%;
    }            
    .footer {
    height: 60px;
    }
}