.post-popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, .8);
     z-index: 2000;
     display: none;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity .3s ease
 }

 .post-popup-overlay.show {
     display: flex;
     opacity: 1
 }

 .post-popup-content {
     position: relative;
     width: 100%;
     height: 90vh;
     max-width: 1621px;
     background: white;
     display: flex;
     flex-direction: column
 }

 @media (min-width:768px) {
     .post-popup-content {
         flex-direction: row
     }
 }

 .post-popup-close {
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 30;
     width: 40px;
     height: 40px;
     background: transparent;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: opacity .3s ease
 }

 .post-popup-close:hover {
     opacity: .7
 }

 .post-popup-close svg {
     width: 20px;
     height: 20px
 }

 .post-popup-inner {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%
 }

 @media (min-width:768px) {
     .post-popup-inner {
         flex-direction: row
     }
 }

 .post-popup-image-container {
     width: 100%;
     height: 50vh;
     flex-shrink: 0;
     overflow: hidden;
     background: #f0f0f0;
     position: relative
 }

 @media (min-width:768px) {
     .post-popup-image-container {
         width: 65%;
         height: 100%
     }
 }

 .post-popup-content.text-mode .post-popup-image-container {
     width: 100%;
     height: 100%
 }

 .post-popup-content.text-mode .post-popup-info {
     display: none
 }

 .post-popup-swiper {
     width: 100%;
     height: 100%
 }

 .post-popup-swiper .swiper-slide {
     width: 100%;
     height: 100%
 }

 .post-popup-swiper .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .post-popup-swiper-button-prev,
 .post-popup-swiper-button-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     width: 40px;
     height: 40px;
     background: rgba(0, 0, 0, .5);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background .3s ease
 }

 .post-popup-swiper-button-prev:hover,
 .post-popup-swiper-button-next:hover {
     background: rgba(0, 0, 0, .7)
 }

 .post-popup-swiper-button-prev {
     left: 20px
 }

 .post-popup-swiper-button-next {
     right: 20px
 }

 .post-popup-swiper-button-prev::after,
 .post-popup-swiper-button-next::after {
     content: '';
     width: 12px;
     height: 12px;
     border-top: 2px solid white;
     border-right: 2px solid white
 }

 .post-popup-swiper-button-prev::after {
     transform: rotate(-135deg)
 }

 .post-popup-swiper-button-next::after {
     transform: rotate(45deg)
 }

 .post-popup-swiper:has(.swiper-slide:only-child) .post-popup-swiper-button-prev,
 .post-popup-swiper:has(.swiper-slide:only-child) .post-popup-swiper-button-next,
 .post-popup-swiper:has(.swiper-slide:only-child) .post-popup-swiper-pagination {
     display: none
 }

 .post-popup-swiper-pagination {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10
 }

 .post-popup-swiper-pagination .swiper-pagination-bullet {
     width: 8px;
     height: 8px;
     background: white;
     opacity: .5
 }

 .post-popup-swiper-pagination .swiper-pagination-bullet-active {
     opacity: 1
 }

 .post-popup-info {
     width: 100%;
     padding: 32px;
     display: flex;
     flex-direction: column;
     overflow-y: auto
 }

 @media (min-width:768px) {
     .post-popup-info {
         width: 35%;
         padding: 40px
     }
 }

 .post-popup-header {
     margin-bottom: 24px
 }

 .post-popup-description {
     flex: 1
 }

 .post-card-clickable {
     cursor: pointer
 }

 .post-popup-swiper iframe {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .post-popup-text-content {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
     padding: 2rem 4rem;
     background-color: #ffffff;
     color: #1f2937;
     font-size: 1.5rem;
     font-weight: 500;
     overflow-y: auto;
     line-height: 1.6
 }

 @media (min-width:768px) {
     .post-popup-text-content {
         font-size: 2rem;
         padding: 4rem
     }
 }