.blog-posts-loop {
    position: relative;
}

.blog-posts-loop__inner {
    min-height: 1px;
}

.blog-posts-loop__header {
    margin-inline: auto;
    max-width: 52rem;
    text-align: center;
}


.blog-posts-loop__preheading,
.blog-posts-loop__heading {
    margin-inline: auto;
}

.blog-posts-loop__intro {
    margin-inline: auto;                                      z
}

.blog-posts-loop__filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxs);
    justify-content: center;
    margin: 5rem 0;
}

.blog-posts-loop__filter {
    white-space: nowrap;
}

.blog-posts-loop__filter:not(.is-active),
.blog-posts-loop__filter:not(.is-active):hover,
.blog-posts-loop__filter:not(.is-active):focus-visible {
    border-color: transparent;
}

.blog-posts-loop__filter.is-active {
    border-color: var(--btn-transparent-rounded-hover-border-color);
    border-color: var(--btn-transparent-rounded-hover-border-color-effective);
    color: var(--btn-transparent-rounded-hover-text-color);
    pointer-events: none;
}

.blog-posts-loop__filter.is-active::before {
    transform: translateX(0);
}

.blog-posts-loop__status {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.blog-posts-loop.is-loading .blog-posts-loop__grid {
    opacity: 0.72;
}

.blog-posts-loop.is-transitioning-out .blog-posts-loop__grid {
    opacity: 0;
    transform: translateY(-0.5rem);
}

.blog-posts-loop.is-transitioning-in .blog-posts-loop__grid {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: none;
}

.blog-posts-loop__header + .blog-posts-loop__grid {
    margin-top: var(--space-xxl);
}

.blog-posts-loop__grid.blog-posts-loop__grid {
    --block-column-gap: var(--space-xxl);
    column-gap: calc(2.667 * var(--space-s));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: 5rem;
    transition: opacity 220ms ease, transform 220ms ease;
}

.blog-posts-loop__item,
.blog-posts-loop__card {
    min-width: 0;
}

.blog-posts-loop__item {
    grid-column: span 6;
    max-width: none;
}

.blog-posts-loop__card {
    display: flex;
    flex-direction: column;
}

.blog-posts-loop__media {
    aspect-ratio: 608 / 405;
    background: #f1f0ed;
    border-radius: 0.375rem;
    display: block;
    overflow: hidden;
}

.blog-posts-loop__image,
.blog-posts-loop__image-placeholder {
    display: block;
    height: 100%;
    width: 100%;
}

.blog-posts-loop__image {
    object-fit: cover;
}

.blog-posts-loop__image-placeholder {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)),
        #f1f0ed;
}

.blog-posts-loop__content {
    margin-top: 1.25rem;
}

.blog-posts-loop__meta,
.blog-posts-loop__title,
.blog-posts-loop__excerpt {
    margin: 0;
}

.blog-posts-loop__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.blog-posts-loop__category {
    color: inherit;
}

.blog-posts-loop__category.base-theme-button-link--transparent-rounded {
    font-size: var(--font-size-s);
    padding-bottom: 6px;
    padding-top: 6px;
}

.blog-posts-loop__title {
    text-wrap: wrap;
}

.blog-posts-loop .blog-posts-loop__title a,
.blog-posts-loop .blog-posts-loop__title a:hover,
.blog-posts-loop .blog-posts-loop__title a:focus,
.blog-posts-loop .blog-posts-loop__title a:active,
.blog-posts-loop .blog-posts-loop__title a:visited {
    color: inherit;
    text-decoration: none;
    text-decoration-line: none !important;
}

.blog-posts-loop__excerpt {
    margin-top: 0.875rem;
}

.blog-posts-loop__read-more {
    margin-top: 0.625rem;
}

.blog-posts-loop__pagination {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.blog-posts-loop__pagination .base-theme-pagination__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxs);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-posts-loop__pagination .base-theme-pagination__item {
    margin: 0;
}

.blog-posts-loop__pagination .base-theme-pagination__item.is-current .base-theme-pagination__link {
    pointer-events: none;
}

.blog-posts-loop__pagination .base-theme-pagination__status:empty {
    display: none;
}

@media (min-width: 1024px) {
    .blog-posts-loop__grid.blog-posts-loop__grid {
        column-gap: calc(2.667 * var(--space-m));
    }
}

@media (max-width: 700px) {
    .blog-posts-loop__item {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-posts-loop__grid.blog-posts-loop__grid {
        transition: none;
    }
}
