.frontpage-hero-container {
height: 95vh;
width: 100vw;
justify-self: center;
position: relative;
display: grid;
place-items: start center;
}
.frontpage-hero-bg-image{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
object-position: 50% 95%;
} .scroll-indicator {
position: absolute;
bottom: 10px;
}
.scroll-line {
width: 1px;
height: 25svh;
background: linear-gradient(to bottom, rgba(204, 204, 204, 0) 0%, #d2d2d2 30%, #d2d2d2 70%, rgba(204, 204, 204, 0) 100%);
position: relative; overflow: hidden;
}
.scroll-square {
width: 2px;
height: min(calc(2.5 * 1440px / 100), 2.5vw);
background: rgba(255, 255, 255, 0.9);
position: absolute; transform: translateX(-25%);
animation: scrollSquaresAnimation 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
animation-fill-mode: both;
}
@keyframes scrollSquaresAnimation {
0% {
top: 0;
opacity: 0.3;
}
85% {
top: calc(100% - min(calc(2.5 * 1440px / 100), 4.5vw)); opacity: 1;
}
100% {
top: calc(100% - min(calc(2.5* 1440px / 100), 4.5vw));
opacity: 0;
}
} .btn.cuisine {
color: var(--color-restaurant);
border: solid var(--color-restaurant) 1px;
}
.btn.cuisine:hover {
color: white;
background-color: var(--color-restaurant);
transition: 0.5s;
}
.frontpage__concept__text{
margin: min(calc(1 * 1440px / 100), 1vw);
font-size: var(--desktop-subtitle-size);
text-align: center;
}   .frontpage-content-container {
margin: auto;
display: grid;
grid-template-columns: 47.5% 47.5%;
gap: 5%;
max-width: 1200px;
padding: 100px 40px;
position: relative;
z-index: 1;
justify-self: center;
align-items: stretch;
} .frontpage-content-wrapper {
gap: min(calc(1 * 1440px / 100), 1vw);
display: flex;
flex-direction: column;
justify-content: space-evenly;
} .frontpage-content-text {
font-size: var(--desktop-paragraph-size);
line-height: 160%;
letter-spacing: 0.2em;
color: var(--color-secondary);
} .frontpage-content-container.cuisine h2,
.frontpage-content-container.cuisine h3 {
color: var(--color-restaurant);
} .frontpage-news-title {
text-align: center;
} .frontpage-header-logo-container {
position: relative;
top: -5%;
filter: drop-shadow(0px 1.5px 1.5px black);
display: flex;
align-self: center;
justify-content: center;
max-width: clamp(100px, 50vw, 250px);
max-height: clamp(100px, 50vw, 250px);;
}
.frontpage-header-logo {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease-in-out,
transform 1s ease-in-out;
}
.hero-bg-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: inherit;
z-index: -1;
overflow: hidden;
background-color: white;
}
.hero-bg-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.5));
pointer-events: none;
z-index: 1;
}
.scroll-indicator {
opacity: 0;
transition: opacity 2s ease-out 0.5s;
}
#btn--main--reserve{
opacity: 0;
transition: opacity 2s ease-out 0.5s;
}
#btn--main--reserve:hover{
border: none;
}
.scroll-text-mobile,
.header-container-mobile {
display: none;
}
.frontpage-location-btn{
margin: 40px auto;
}    #frontpage-instagram-feed {
display: flex; 
flex-direction: column;
align-items: center;
justify-content: center;
align-content:center;
width: 100%; }
.frontpage-content-container.frontpage-instagram-feed {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto; gap: 5%;
position: relative;
z-index: 1;
padding: 100px 0px 0px 0px;
max-width: none;
}
.frontpage-content-container.frontpage-instagram-feed h2 {
margin-bottom: 100px;
} .sb_instagram_header  {
display: none;
}
#sbi_load{
display: none;
} #sb_instagram #sbi_images {
box-sizing: border-box;
display: grid;
width: 100%;
padding: 0px;
}   @media (max-width: 768px) { .frontpage-popup-overlay {
display: none;
} .frontpage-content-container {
display: flex;
flex-direction: column;
padding: 10vw 4vw;
gap: 4vw;
}
.frontpage-content-container h2, h3{
align-self: center;
text-align: center;
}
.frontpage-content-text {
font-size: var(--mobile-font-size);
}
.frontpage-content-wrapper {
gap: 15px;
} .frontpage-content-container .image-wrapper {
order: -1; }
.frontpage-content-container .frontpage-content-wrapper {
order: 1;
}
.scroll-line {
height: 20svh;
}
.scroll-square {
height: 4vw;
}
}