:root {
    --preview-dimming: 0;
}

#bottom-popup-wrapper {
    z-index: 20;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    position: fixed;
    left: 0;
    top: 0;
    transform: translateY(100vh);
}

#bottom-popup-wrapper #bottom-popup {
    width: 100vw;
    display: flex;
    background: #fff;
    margin-top: 30px;
    overflow-x: hidden;
    padding-top: 50px;
    position: relative;
    justify-content: center;
    border-radius: 40px 40px 0 0;
    min-height: calc(100vh - 80px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

#bottom-popup-wrapper #bottom-popup::before {
    top: 17px;
    content: "";
    width: 46px;
    height: 6px;
    position: absolute;
    border-radius: 5px;
    left: calc(50% - 23px);
    background: rgba(28, 28, 28, .26);
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper {
    width: calc(100% * 378/428);
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper h2 {
    font-size: 37px;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames {
    position: relative;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .preview {
    position: absolute;
    opacity: calc(1 - var(--preview-dimming));
    filter: blur(calc(5px * var(--preview-dimming)));
    transform: translateY(calc(60px * var(--preview-dimming)));
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .preview .date {
    font-size: 18px;
    margin-top: 5px;
    font-weight: 500;
    margin-bottom: 15px;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .preview .description {
    color: #3C3C3C;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full {
    padding-top: 6px;
    opacity: calc(var(--preview-dimming) * var(--preview-dimming) * 2);
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .date {
    color: #000;
    font-size: 21px;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .slider {
    left: -23px;
    width: 100vw;
    height: 245px;
    margin-top: 20px;
    position: relative;
    display: inline-flex;
    overflow: auto hidden;
    scrollbar-width: none;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .slider img:first-child {
    margin-left: 26px;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .slider img {
    width: 350px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 20px;
    background: #f3f3f3;
    border-radius: 30px;
    box-shadow: 0 2px 8px -1px rgba(204, 17, 240, 0.59);
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .slider img:last-child {
    margin-right: 26px;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .description {
    font-size: 24px;
    margin-top: -15px;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .channel {
    top: -42px;
    width: 230px;
    display: flex;
    height: 50px;
    position: relative;
    border-radius: 20px;
    align-items: center;
    left: calc(50% - 106px);
    justify-content: center;
    backdrop-filter: blur(25px);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    transition: .15s transform cubic-bezier(0.22, 1, 0.36, 1);
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .channel:active {
    transform: scale(.96);
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .channel img {
    width: 35px;
    height: 35px;
    background: #f3f3f3;
    border-radius: 50%;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full .channel p {
    font-size: 18px;
    margin-left: 10px;
    font-family: "SFCompactRoundedBold", sans-serif;
}

#bottom-popup-wrapper #bottom-popup .popup-wrapper .frames .full #jumbo-button {
    margin-top: 30px;
    margin-bottom: 45px;
}