body .container {
    max-width: 1256px;
}
.archive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

h3 {
    margin: .8rem 0 0 0;
}
h1 {
    font-size: 1rem;
}

.archive-gallery {
    overflow: hidden;
    height: 18rem;
    width: 100%;
    position: relative;
    border: 1px solid rgba(0.1, 0.1, 0.1, 0.05);
    border-radius: 4px;
}

.archive-gallery img {
    width: 100%;
    margin: 0;
    max-width: 100%;
    /* max-height: calc(min(18rem, 100%)); */
    object-fit: contain;
    top: 0;
    position: absolute;
    right: 0%;
    transition: all .25s ease-in-out;
    cursor: grab;
}

.archive-gallery :not(.active):not(.deactivated) {
    /* transition: all .23s ease-in-out; */
    right: -120%;
    clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%);
    animation: roundrobin .3s linear 0 1;
}

.archive-gallery:hover img:not(.active):not(.deactivated) {
    right: -90%;
    display: inline;
    z-index: 3;
    cursor: pointer;
}

img.deactivated {
    right: -120%;
    transition: none;
    z-index: -1;
}

.archive-gallery .active:not(.deactivated) {
    right: 0%;
    z-index: 2;
}

@keyframes roundrobin {
    0% {
        z-index: -1;
    }
    99% {
        z-index: -1;
    }
    100% {
        z-index: 3;
    }
}

@media screen and (max-width: 800px) {
    .archive {
        grid-template-columns: 1fr;
    }
}