.contents-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 24px; margin-top: 40px;}
.contents-grid .grid-item{padding: 24px; border: 2px solid black; border-top: 16px solid black; border-radius: 12px;
display: flex; flex-direction: column; min-height: 320px; }
.contents-grid .grid-item > .item-title{font-weight: 600; overflow: hidden;
    width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.contents-grid .grid-item > .item-by{font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px;
    overflow: hidden; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.contents-grid .grid-item > .item-txt{display: none;}
.contents-grid .grid-item > .btns-wrapper{flex-direction: column; align-items: start; gap: 12px; margin-top: auto;}
.contents-grid .grid-item > .btns-wrapper > a{display: flex; align-items: center; gap: 4px; color: #CD1D8B;}



.contents-grid .grid-item .item-popup{position: fixed; z-index: 5; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: rgba(0, 0, 0, 0.159); display: none; place-items: center;}
.contents-grid .grid-item .item-popup.is-open{display: grid;}
.contents-grid .grid-item .item-popup .item-popup-inner{position: relative; width: min(780px, 95%); padding: 65px 100px; 
    background: white; border-radius: 16px; max-height: 95vh; box-shadow: 0px 4px 20px 0px rgba(0, 55, 100, 0.10);}
/* .contents-grid .grid-item .item-popup .item-popup-inner::-webkit-scrollbar{display: none;} */
.contents-grid .grid-item .item-popup .item-popup-inner .close-btn{cursor: pointer; position: absolute; top: 15px; right: 15px; background: #CD1D8B; 
    padding: 16px; border-radius: 50%; display: grid; place-items: center; border: none;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content{background: white; padding: 40px; border: 2px solid black; 
    border-top: 30px solid black; border-radius: 12px; display: flex; flex-direction: column; max-height: 80vh; overflow: auto;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content::-webkit-scrollbar{display: none;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-title{font-weight: 600; margin: 0;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-by{font-weight: 600; padding-block: 24px;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-txts-wrapper > .popup-txt:first-child{padding-top: 40px; border-top: 2px solid rgb(241, 241, 241);}
/* .contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-txts-wrapper{max-height: 265px; overflow: auto;} */
/* .contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-txts-wrapper::-webkit-scrollbar{display: none;} */
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-visual{padding-block: 40px; display: flex; 
    flex-direction: column; border-bottom: 2px solid rgb(241, 241, 241);}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-visual > img{width: 100%; padding-bottom: 24px;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .popup-visual > .btn{margin-inline: auto; gap: 4px;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .pres-btn{margin-left: auto; margin-top: 40px; gap: 4px;}
.contents-grid .grid-item .item-popup .item-popup-inner .item-popup-content .pres-btn > img{width: 22px;}


.contents-grid .grid-item.prg .item-popup .popup-txts-wrapper .popup-txt:nth-child(3),
.contents-grid .grid-item.prg .item-popup .popup-txts-wrapper .popup-txt:nth-child(5){margin-top: 24px; font-weight: 600;}


.contents-grid *[room="balcony"]{border-color: #5CA491 !important;}
.contents-grid *[room="launch-pad-a"]{border-color: #00B3EF !important;}
.contents-grid *[room="launch-pad-b"]{border-color: #FFCF00 !important;}
.contents-grid *[room="ritual"]{border-color: #7E2487 !important;}
.contents-grid *[room="classic"]{border-color: #FF0179 !important;}
.contents-grid *[room="cobra"]{border-color: #004494 !important;}
.contents-grid *[room="stage"]{border-color: #1D0D34 !important;}

@media screen and (max-width: 768px){
    .contents-grid .grid-item .item-popup .item-popup-inner{padding: 0; background: none;}
    .contents-grid .grid-item .item-popup .item-popup-inner .close-btn{right: 0; top: unset; bottom: 102%; padding: 12px;}
}