@keyframes card-anim {
    from {
        opacity: 0;
        transform: translateY(-180%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.dorms-list {
    position: absolute;
    display: flex;
    left: 17.5vw;
    bottom: 26.85vh;
    z-index: 6;
}
.dorm-card {
    width: 19.06vw;
    height: 41.94vh;
    padding-right: 5.1vw;
}
.dorm-card:nth-child(1) {
    animation: card-anim 750ms ease-in-out;
}
.dorm-card:nth-child(2) {
    animation: card-anim 1s ease-in-out;
}
.dorm-card:nth-child(3) {
    animation: card-anim 1.4s ease-in-out;
}
.dorm-btn {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    transition: 1s;
}
.dorm-btn:hover .dorm-body {
    filter: grayscale(100%);
}
.dorm-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70.87%;
    object-fit: cover;
}
.dorm-footer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    height: 29.13%;
    width: 100%;
}
.dorm-footer p {
    text-transform: uppercase;
    font-size: 2.22vh;
}
.slide img {
    object-fit: cover;
}
.open {
    display: block;
}
.close {
    display: none;
}