.wbp-header {
    padding: 20px;

    h3 {
        text-transform: uppercase;
        font-size: 20px;
    }
}

.wbp-widget {
    background-color: white;
    padding-bottom: 20px;
    padding-top: 20px;

    .posts {
        display: flex;

        .post-date {
            font-size: 12px;
        }

        .post {
            flex: 0 0 calc(100% / 3);
            scroll-snap-align: start;
            overflow: hidden;

            @media screen and (max-width: 1024px) {
                flex: 0 0 calc(100% / 1);
            }

            .post-title {
                display: block;
                margin: 10px 0;
            }

            .post-image {
                display: block;
                width: 100%;
                height: 250px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 50% 50%;
            }

            .post-excerpt {
                text-wrap: wrap;
                text-align: justify;
                margin: 0;
            }
        }
    }
}

.wbp-widget.has-slider {
    .posts-wrapper {
        display: grid;
        grid-template-columns: 30px auto 30px;

        .posts {
            white-space: nowrap;
            gap: 20px;
            height: auto;
            overflow-x: hidden;
            overflow-y: hidden;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: row;
            scroll-snap-type: x mandatory;
        }

        .next, .prev {
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: black;
            font-size: 30px;
        }
    }
}

.wbp-widget:not(.has-slider) {

    .posts {
        padding: 20px;
        gap: 20px;
    }

    .next, .prev {
        display: none;
    }
}

.wbp-widget.hook-display-left-column {
    .posts {
        display: block;

        .post {
            margin-bottom: 40px;
        }
    }
}