*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
background:#0F1115;
font-family:'Manrope',sans-serif;
display:flex;
gap:24px;
height:100vh;
padding:0 64px 64px;
align-items:stretch;
}

.section{
flex:1;
position:relative;
border:2px solid #D4A373;
border-top:none;
border-radius:0 0 8px 8px;
background:var(--bg) center/cover no-repeat;
overflow:visible;
text-decoration:none;
margin-bottom:calc(48px + 24px);
}

.section::before{
content:'';
position:absolute;
inset:0;
background:rgba(0,0,0,0);
transition:.3s;
z-index:1;
}

.section p{
position:absolute;
bottom:calc(-48px - 24px);
left:50%;
transform:translateX(-50%);
color:#fff;
font-size:48px;
font-weight:700;
letter-spacing:.04em;
white-space:nowrap;
transition:.3s;
z-index:3;
}

.section small{
position:absolute;
bottom:48px;
left:50%;
transform:translateX(-50%);
color:#A0A6AD;
font-size:24px;
font-weight:500;
text-align:center;
opacity:0;
transition:.3s;
z-index:3;
}

.section:hover::before{
background:rgba(0,0,0,.8);
}

.section:hover p{
bottom:50%;
transform:translate(-50%,50%);
}

.section:hover small{
opacity:1;
}

.mid::after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:55%;
background:linear-gradient(to bottom,#0F1115 0%,transparent 100%);
z-index:2;
pointer-events:none;
}

.logo{
position:absolute;
top:24px;
left:50%;
transform:translateX(-50%);
height:90px;
z-index:3;
}

.logo-mobile{
display:none;
}

@media (max-width:768px){

html,body{
height:100%;
overflow:hidden;
}

/* мобільний layout */

body{
display:flex;
flex-direction:column;
padding:32px;
gap:24px;
height:100vh;
}

/* блоки */

.section{
flex:1;
margin:0;
border-radius:8px;
border-top:4px solid #D4A373;
}

/* прибираємо затемнення */

.section::before{
background:rgba(0,0,0,0.45);
}

/* прибираємо текст знизу */

.section small{
display:none;
}

/* текст по центру */

.section p{
top:50%;
left:50%;
transform:translate(-50%,-50%);
bottom:auto;
font-size:32px;
}

/* логотип */

.logo{
display:none;
}

.logo-mobile{
display:block;
margin:0 auto 24px;
height:64px;
}

}