:root {
    --content-grid-gap-row: var(--main-gap);
    --content-grid-gap-cover: var(--main-gap);
    --content-grid-gap-stacked: var(--main-padding);
    --content-grid-gap-centered: var(--main-gap);

    --content-grid-card-width-row: 230px;
    --content-grid-card-width-cover: 280px;
    --content-grid-card-width-stacked: 192px;
    --content-grid-card-width-centered: 146px;
}

.content-grid-wrp {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.content-grid-config-main,
.content-grid-config-additional {
    display: none;
}

.content-grid-content {
    display: grid;
}

.content-grid-wrp:not(:first-child) .content-grid-content {
    margin-top: 0px;
}

.content-grid-wrp-type-row .content-grid-content {
    width: calc(100% + 2 * var(--content-card-padding-row));
    margin: calc(-1 * var(--content-card-padding-row));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--content-grid-card-width-row), 100%), 1fr));
    gap: var(--content-grid-gap-row);
}

.content-grid-wrp-type-cover .content-grid-content {
    width: calc(100% + 2 * var(--content-card-padding-cover));
    margin: calc(-1 * var(--content-card-padding-cover));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--content-grid-card-width-cover), 100%), 1fr));
    gap: var(--content-grid-gap-cover);
}

.content-grid-wrp-type-stacked .content-grid-content {
    width: 100%;
    margin: 0px;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--content-grid-card-width-stacked), 100%), 1fr));
    gap: var(--content-grid-gap-stacked);
}

.content-grid-wrp-type-centered .content-grid-content {
    width: 100%;
    margin: 0px;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--content-grid-card-width-centered), 100%), 1fr));
    gap: var(--content-grid-gap-centered);
}

.content-grid-wrp-type-row .content-grid-load-more-area {
    width: calc(100% + 2 * var(--content-card-padding-row));
    margin-top: calc(var(--content-card-padding-row));
    margin-left: calc(-1 * var(--content-card-padding-row));
    margin-right: calc(-1 * var(--content-card-padding-row));
}

.content-grid-wrp-type-cover .content-grid-load-more-area {
    width: calc(100% + 2 * var(--content-card-padding-cover));
    margin-top: calc(var(--content-card-padding-cover));
    margin-left: calc(-1 * var(--content-card-padding-cover));
    margin-right: calc(-1 * var(--content-card-padding-cover));
}

.content-grid-wrp-type-stacked .content-grid-load-more-area,
.content-grid-wrp-type-centered .content-grid-load-more-area {
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.content-grid-load-more-hidden-state {
    display: none;
}

.content-grid-scroll-root-loading {
    overscroll-behavior: none;
}

.content-grid-status-wrp {
    display: none;
}

.content-grid-wrp-type-row .content-grid-status-wrp {
    margin-top: calc(var(--main-padding) + var(--content-card-padding-row));
}

.content-grid-wrp-type-cover .content-grid-status-wrp {
    margin-top: calc(var(--main-padding) + var(--content-card-padding-cover));
}

.content-grid-wrp-type-stacked .content-grid-status-wrp,
.content-grid-wrp-type-centered .content-grid-status-wrp {
    margin-top: var(--main-padding);
}

.content-grid-status-wrp.content-grid-status-wrp-visible-state {
    display: block;
}

.content-grid-error-txt {
    color: var(--color-control-red);
    font-size: 15px;
    letter-spacing: 0.4px;
}