.slide-block {
    position: fixed;
    z-index: 100;
    transition: all 0.5s ease;
}

.slide-block--top {
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-101%);
}

.slide-block--bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(101%);
}

.slide-block--left {
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    transform: translateX(-101%);
}

@media (min-width: 568px) {
    .slide-block--left {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .slide-block--left {
        width: 40%;
    }
}

.slide-block--right {
    top: 0;
    right: 0;
    width: 80%;
    height: 100vh;
    transform: translateX(101%);
}

@media (min-width: 568px) {
    .slide-block--right {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .slide-block--right {
        width: 40%;
    }
}

.slide-block--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100vh);
}

.slide-block--active {
    transform: translate(0, 0);
}

.slide-block--center.slide-block--active {
    transform: translate(-50%, -50%);
}

.slide-block--overlay {
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100vh;
}

.slide-block--overflow {
    overflow: hidden;
}