.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);
}

/*Container Sizes*/

: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;
}