.op3-element[data-op3-element-type="courselist"] {
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
    border-width: 0;

    // To make sure JS reads var values correctly, do not use space after :
    --op3-flex-basis-steps:3;
    --op3-flex-gap:2em;
    --op3-separator:"\00a0\00a0\2022\00a0\00a0";

    .op3-element-courselist__container {
        --op3-separator: inherit;
        padding: 1em 0;
    }

    .op3-element-courselist__children {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--op3-flex-gap);
        row-gap: 2em;
    }

    .op3-element[data-op3-element-spec="courselistemptymessage"] {
        margin: 0;
        font-style: italic;
        text-align: center;
        color: #bbb;

        .op3-text-wrapper {
            padding: 2em;
        }
    }

    .op3-element[data-op3-element-type="courselistitem"] {
        flex-basis: calc((100% - var(--op3-flex-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps));
    }

    .op3-element[data-op3-element-type="postmeta"] {
        --op3-separator: inherit !important;
    }

    .op3-element[data-op3-element-spec="courselistloadmore"] {
        max-width: 164px;

        > .op3-link {
            height: 42px;
            padding: 0 1em;
            font-size: inherit;
            border-radius: 4px;

            .op3-text-container {
                font-size: 14px;
                line-height: 1.5;
            }
        }

        [data-op3-background="overlay"]::before,
        [data-op3-background="overlay"]::after {
            background-color: #bababa;
        }
    }

    .op3-element[data-op3-element-spec="wrapflexcourselistpagenavigation"] {
        flex-basis: 100%;
    }

    .loadinfo {
        font-size: 0;
        visibility: hidden;
        text-align: center;

        &::after {
            content: "";
            display: inline-block;
            visibility: visible;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(100, 100, 100, 0.25);
            border-top-color: rgba(100, 100, 100, 0.75);
            border-radius: 50%;
            animation: spin 1s infinite;
        }
    }

    @keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }
}