.slot-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.slot-info-container{
position: fixed;
bottom: calc(var(--m-space-gap) - 2px);
left: calc(var(--m-space-gap) + var(--s-space-gap));
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.slot-info-container.is-visible {
opacity: 1;
}
.slot-menu {
height: 100vh;
height: 100dvh; 
width: 100%;
overflow: hidden;
position: relative;
}
.slot-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slot-item {
position: absolute;
z-index: 1;
top: 0; 
left: 50%;
transform-origin: center center;
width: 200px;
height: 300px;
list-style: none;
cursor: var(--link-cursor);
overflow: hidden;
user-select: none; 
-webkit-user-select: none;
pointer-events: none;
filter: none;
clip-path: inset(2px 0px 2px 0px);
}
.slot-menu.hover-active .slot-item {
pointer-events: auto;
}
.slot-menu.hover-active .slot-item:hover {
cursor: var(--link-cursor);
}
.slot-menu.hover-active .slot-item.is-active:hover{
cursor: default;
} 
.slot-menu:not(.hover-active) .slot-item {
cursor: default !important;
}
.slot-item-wrapper{
opacity: 0;
height: 100%;
overflow: hidden;
background-color: var(--lightgrey);
}
.slot-item.is-faded {
filter: grayscale(100%) !important;
}
.slot-item.is-active {
overflow: visible;
cursor: default;
}
.slot-item img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
opacity: 0;
filter: blur(12px);
transition:0.2s filter cubic-bezier(.075,.82,.165,1), 0.2s transform cubic-bezier(.075,.82,.165,1);
}
.slot-item .slot-item-wrapper figure{
height: 100%;
width: 100%;
}
.slot-item img:hover{
transform: scale(1.05);
}
.slot-item.is-active img:hover{
transform: scale(1);
}
.slot-item .grid-icon{
position: absolute;
right: calc(var(--xs-space-gap) * 2);
top: 0;
opacity: 0;
z-index: 2;
transition: var(--transition-300);
}
.slot-item.is-active:hover img{
filter: grayscale(0%);
}
.slot-item:hover .grid-icon{
opacity: 1;
}
.slot-item.is-active .slot-item-wrapper{
background-color: var(--black);
}
.grid-info {
width: 100%;
text-align: left;
z-index: 2;
opacity: 0;
position: absolute;
left: -100%;
bottom: 0%;
display: flex;
padding-bottom: var(--xxs-space-gap);
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
padding-top: 2px;
gap: var(--xxs-space-gap);
opacity: 0;
transition: var(--transition-100);
}
.slot-info-container .grid-item-info{
display: flex;
justify-content: space-between;
pointer-events: none;
width: max-content;
gap: calc(var(--xs-space-gap) * 1.5);
}
.grid-info .grid-item-description, .grid-info .grid-item-year{
max-width: max-content;
text-align: left;
margin-left: auto;
}
.slot-item.is-active .grid-icon{
opacity: 1;
transform: scale(1);
}
.grid-info p {
margin: 0;
}
img#helly-intro{
width: 100%;
height: 100%;
max-width: 400px;
max-height: 600px;
object-fit: contain;
} .col:not(.no-animate){
transition: transform 1s var(--ease), opacity 2s var(--ease), filter 2s var(--ease);
transition-delay: calc(var(--index) * 0.1s);
transform: translateY(8px);
filter: blur(4px);
opacity: 0;
}
.col:not(.no-animate).has-been-seen{
transform: translateY(0px);
opacity: 1;
filter: blur(0px);
}
.col:not(.no-animate).animation-complete{
transform: none;
}
.fadecol{
transition: all 0.6s var(--transition-belzier);
transition-delay: calc(var(--index) * 0.3s);
opacity: 0;
filter: blur(20px);
}
.fadecol:not(.no-animate).has-been-seen{
opacity: 1;
filter: blur(0);
}
@media only screen and (max-width: 580px) {
img#helly-intro{
aspect-ratio: 2/3;
height: 100%;
width: 100%;
max-width: 100%;
object-fit: cover;
}
}