.lock {
    overflow: hidden;
}

.no-clicks {
    pointer-events: none;
}

.post-popup {
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    min-width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, .9);
    padding-top: calc(40px + (110 - 40)*((100vw - 360px) /(1440 - 360)));
    cursor: pointer;
    /*transition: all 0.8s ease;*/
}

.post-popup.popup-opened {
    opacity: 1;
    visibility: visible;
}

.post-popup-content {
    transform: perspective(600px) translate(0px, -100%) rotateX(45deg);
    cursor: default;
    margin: 0 auto 50px auto;
    position: relative;
    display: block;
    width: 75%;
    height: fit-content;
    padding: 50px;
    background-color: #111;
    border-radius: calc(24px + (40 - 24)*((100vw - 360px) /(1440 - 360)));
    /*transition: all 0.8s ease;*/
}

.popup-opened .post-popup-content {
    transform: perspective(600px) translate(0px, 0px) rotateX(0deg);
}


.post-popup-close {
    position: absolute;
    cursor: pointer;
    right: 15px;
    top: 15px;
}
.post-popup-close svg{
    width: 40px;
    height: 40px;
}


@media screen and (min-width: 1440px) {

    .post-popup {
        padding-top: 110px;
    }

    .post-popup-content {
        padding: 60px 60px;
        border-radius: 40px;
    }

}

@media screen and (max-width: 1023.98px) {
    .post-popup-content {
        height: fit-content;
    }

    .post-popup-content {
        width: 80%;
        padding: 40px 20px;
    }

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

    .post-popup-close {
        right: 15px;
        top: 5px;
    }
}


@media screen and (max-width: 599.98px) {
    .post-popup-close svg {
        width: 25px;
        height: 25px;
    }

    .post-popup-close {
        right: 5px;
        top: 10px;
    }

    .post-popup-content {
        width: 90%;
    }
}
/* Items */
.post-thumbnail {
    text-align: center;
    width: 100%;
}

.post-thumbnail img {
    width: 100%;
}

.blog_list_popup {
    /* General styles for the blog list popup */
    margin: 0 auto;
    padding: 0 10px;
}

.post-items-wrapper {
    display: grid;
    gap: 10px; /* Adjust the spacing between items */
}

/* Grid layout for different screen sizes */
.blog_list_popup.columns_1440-1 .post-items-wrapper {
    grid-template-columns: repeat(1, 1fr);
}
.blog_list_popup.columns_1440-2 .post-items-wrapper {
    grid-template-columns: repeat(2, 1fr);
}
.blog_list_popup.columns_1440-3 .post-items-wrapper {
    grid-template-columns: repeat(3, 1fr);
}
.blog_list_popup.columns_1440-4 .post-items-wrapper {
    grid-template-columns: repeat(4, 1fr);
}
.blog_list_popup.columns_1440-5 .post-items-wrapper {
    grid-template-columns: repeat(5, 1fr);
}
.blog_list_popup.columns_1440-6 .post-items-wrapper {
    grid-template-columns: repeat(6, 1fr);
}

/* Similar styles for other breakpoints */
@media (max-width: 1366px) {
    .blog_list_popup.columns_1366-1 .post-items-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog_list_popup.columns_1366-2 .post-items-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog_list_popup.columns_1366-3 .post-items-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog_list_popup.columns_1366-4 .post-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .blog_list_popup.columns_1366-5 .post-items-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }

    .blog_list_popup.columns_1366-6 .post-items-wrapper {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1024px) {
    .blog_list_popup.columns_1024-1 .post-items-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog_list_popup.columns_1024-2 .post-items-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog_list_popup.columns_1024-3 .post-items-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog_list_popup.columns_1024-4 .post-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .blog_list_popup.columns_1024-5 .post-items-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }

    .blog_list_popup.columns_1024-6 .post-items-wrapper {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .blog_list_popup.columns_768-1 .post-items-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog_list_popup.columns_768-2 .post-items-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog_list_popup.columns_768-3 .post-items-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog_list_popup.columns_768-4 .post-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .blog_list_popup.columns_768-5 .post-items-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }

    .blog_list_popup.columns_768-6 .post-items-wrapper {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 680px) {
    .blog_list_popup.columns_680-1 .post-items-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog_list_popup.columns_680-2 .post-items-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog_list_popup.columns_680-3 .post-items-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog_list_popup.columns_680-4 .post-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .blog_list_popup.columns_680-5 .post-items-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }

    .blog_list_popup.columns_680-6 .post-items-wrapper {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 480px) {
    .blog_list_popup.columns_480-1 .post-items-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog_list_popup.columns_480-2 .post-items-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog_list_popup.columns_480-3 .post-items-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog_list_popup.columns_480-4 .post-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .blog_list_popup.columns_480-5 .post-items-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }

    .blog_list_popup.columns_480-6 .post-items-wrapper {
        grid-template-columns: repeat(6, 1fr);
    }
}