.convertkit-broadcasts.has-background,
.editor-styles-wrapper .convertkit-broadcasts.has-background {
    padding: 20px;
}

.convertkit-broadcasts.convertkit-broadcasts-loading,
.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading {
    background-color: #e3e3e3 !important;
    background-image: url(/wp-content/plugins/convertkit/resources/frontend/images/spinner.gif);
    background-position: center;
    background-repeat: no-repeat;
}

.convertkit-broadcasts-list,
.editor-styles-wrapper .convertkit-broadcasts-list,
.convertkit-broadcasts-pagination,
.editor-styles-wrapper .convertkit-broadcasts-pagination {
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * List View
 */
.convertkit-broadcasts-list li {
    display: grid;
    grid-template-areas:
        "date title"
        "image text";
    grid-template-columns: 150px auto;
    grid-column-gap: 20px;
}

@media screen and (max-width: 478px) {
    .convertkit-broadcasts-list li {
        grid-template-areas:
            "image image"
            "date date"
            "title title"
            "text text";
        grid-row-gap: 10px;
    }
}

/**
 * Grid View.
 */
.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: start;
}

.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li {
    grid-template-areas:
        "image"
        "date"
        "title"
        "text";
    grid-template-columns: none;
    grid-row-gap: 10px;
}

.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more {
    margin: 10px 0 0 0;
}

@media screen and (max-width: 768px) {
    .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 478px) {
    .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/**
 * Broadcast Item
 */
.convertkit-broadcasts-list li {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.convertkit-broadcasts-list li time {
    display: inline-block;
    grid-area: date;
}

.convertkit-broadcasts-list li .convertkit-broadcast-title {
    display: inline-block;
    grid-area: title;
}

.convertkit-broadcasts-list li .convertkit-broadcast-image {
    display: inline-block;
    grid-area: image;
}

.convertkit-broadcasts-list li .convertkit-broadcast-image img {
    max-width: 100%;
    height: auto;
}

.convertkit-broadcasts-list li .convertkit-broadcast-text {
    display: inline-block;
    grid-area: text;
    font-size: 16px;
}

.convertkit-broadcasts-list li .convertkit-broadcast-read-more {
    display: block;
}

@media screen and (max-width: 478px) {
    .convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li {
        margin: 0 0 20px 0;
    }
}

/**
 * Pagination
 */
.convertkit-broadcasts-pagination {
    display: grid;
    grid-template-areas: "prev next";
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    padding: 20px 0 0 0;
}

.convertkit-broadcasts-pagination li {
    list-style: none;
    margin: 0;
}

.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev {
    grid-area: prev;
    text-align: left;
}

.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next {
    grid-area: next;
    text-align: right;
}

/**
 * Replicates CSS styles provided by block themes for older non-block themes
 * that may not include these definitions, resulting in incorrect spacing.
 */
.convertkit-broadcasts {
    margin-bottom: 20px;
}

@media only screen and (min-width: 482px) {
    .convertkit-broadcasts {
        margin-bottom: 30px;
    }
}