html,
    body {
        position: relative;
        height: 100%;
    }
    
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .swiper {
        width: 525px;
        height: 550px;
        padding: 50px;
    }
    
    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
    }
    
    .swiper-slide:nth-child(1n) {
        background-color: rgb(92, 7, 7);
    }
    
    .swiper-slide:nth-child(2n) {
        background-color: rgb(15, 64, 104);
    }
    
    .swiper-slide:nth-child(3n) {
        background-color: rgb(15, 94, 61);
    }
    
    .swiper-slide:nth-child(4n) {
        background-color: rgb(99, 63, 16);
    }
    
    .swiper-slide:nth-child(5n) {
        background-color: rgb(9, 77, 82);
    }
    
    .swiper-slide:nth-child(6n) {
        background-color: rgb(128, 7, 101);
    }
    
    .swiper-slide:nth-child(7n) {
        background-color: rgb(114, 11, 11);
    }
    
    .swiper-slide:nth-child(8n) {
        background-color: rgb(3, 15, 49);
    }
    
    .popup .overlay {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 41vw;
        height: 92vh;
        background: rgba(0, 0, 0, 0);
        z-index: 1;
        display: none;
    }
    
    .popup .content {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 8px;
        transform: translate(-50%, -50%) scale(0);
        background: #fff;
        width: 450px;
        height: 300px;
        z-index: 2;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .popup .close-btn {
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        background: #222;
        color: #fff;
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
    }
    
    .popup.active .overlay {
        display: block;
    }
    
    .popup.active .content {
        transition: all 300ms ease-in-out;
        transform: translate(-50%, -50%) scale(1);
    }