.images-list-hover {
position: relative;
display: grid;
grid-template-columns: 1fr;
}
.images-list-hover--empty {
display: block;
min-height: 0;
}
.images-list-hover__images {
display: grid;
height: 100%;
flex-wrap: wrap;
position: relative;
z-index: 1;
overflow: hidden;
grid-row-start: 1;
grid-column-start: 1;
width: 100%;
min-height: initial;
}
.frame__item {
grid-row-start: 1;
grid-column-start: 1;
width: 100%;
}
.images-list-hover__image {
flex: 0 1 100%;
display: flex;
position: relative;
background-color: #fff;
grid-row-start: 1;
grid-column-start: 1;
overflow: hidden;
min-height: 100%;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
transform: scale(1.1);
transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.images-list-hover__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
image-rendering: auto;
object-fit: cover;
transition: opacity .5s ease-in;
}
.images-list-hover__image.is-visible {
opacity: 1;
transform: scale(1);
}
.images-list-hover__image .image-wrapper {
flex: 1;
min-height: 100%;
}
.image-wrapper {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 0;
padding-top: calc(1 / var(--aspect-ratio)* 100%);
}
.images-list-hover__inner {
position: relative;
z-index: 2;
min-height: initial;
}
.images-list-hover__content {
display: flex;
flex-direction: column;
justify-content: center;
position: sticky;
height: 100%;
overflow: hidden;
text-align: center;
}
.images-list-hover__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 749px) {
.images-list-hover__actions {
flex-direction: column;
}
}
.collection-hover__button {
display: inline-block;
align-self: center;
padding: 15px;
margin: 0;
color: #fff;
opacity: 0.5;
transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
font-size: 200%;
}
@media only screen and (max-width: 749px) {
.collection-hover__button {
font-size: 150%;
}
}
.collection-hover__button:hover,
.collection-hover__button.is-selected {
opacity: 1;
color: #fff;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-bg);
opacity: var(--overlay-opacity);
} :root {
--full-height: 100vh;
--full-screen: var(--full-height);
--three-quarters: 75vh;
--two-thirds: 66vh;
--one-half: 50vh;
--one-third: 33vh;
}
.screen-height-full {
min-height: var(--full-screen);
}
.screen-height-three-quarters {
min-height: var(--three-quarters);
}
.screen-height-two-thirds {
min-height: var(--two-thirds);
}
.screen-height-one-half {
min-height: var(--one-half);
}
.screen-height-one-third {
min-height: var(--one-third);
}
.seven-fifty-height-hero {
min-height: 750px;
}
.sixty-fifty-height-hero {
min-height: 650px;
}
.five-fifty-height-hero {
min-height: 550px;
}
.four-fifty-height-hero {
min-height: 450px;
}
.four-hundred-height-hero {
min-height: 400px;
}
.three-fifty-height-hero {
min-height: 350px;
}
.three-hundred-height-hero {
min-height: 300px;
}
.two-fifty-height-hero {
min-height: 250px;
}
.two-hundred-height-hero {
min-height: 200px;
}
.one-fifty-height-hero {
min-height: 150px;
}