/*
    Block: Posts Slider
    Note: Selectors must start with .block-posts-slider
*/

.block-posts-slider .swiper {
    padding-block: 2.5rem;
    margin-block: -2.5rem;
}

.block-posts-slider .swiper-header {
    gap: 1.125rem;
    margin-bottom: 2.5rem;
}

.block-posts-slider .swiper-header .title {
    margin: 0;
}

.block-posts-slider .post .image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: .8777;
    isolation: isolate;
    padding: 1.875rem;
    overflow: hidden;
}

.block-posts-slider .post .image-wrapper .post__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform 500ms cubic-bezier(.1, 0, .3, 1);
}

.block-posts-slider .post:is(:hover, :focus-within) .image-wrapper .post__image {
    transform: scale(1.2);
}

.block-posts-slider .post .category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.block-posts-slider .post .post__category {
    padding: .46875rem .84375rem;
    border-radius: 100px;
    background-color: var(--c-primary);
    color: var(--c-heading-d);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: -.03em;
    line-height: 2;
}

.block-posts-slider .post .meta {
    margin-block: 1.875rem 1.375rem;
    gap: .625rem;
}

.block-posts-slider .post .meta .inline-hr {
    margin: 0;
    color: var(--c-primary);
}

.block-posts-slider .post .post__title {
    display: inline-block;
    margin-right: 1.875rem;
}

@media screen and (width <= 920px) {
    .block-posts-slider .swiper {
        margin-inline: calc(-1 * var(--offset));
        padding-inline: var(--offset);
    }
}

@media screen and (width <= 620px) {
    .block-posts-slider .post .image-wrapper {
        aspect-ratio: 1;
    }
    .block-posts-slider .post .meta {
        margin-block: 1.875rem 1.25rem;
    }
    .block-posts-slider .swiper-wrapper {
        aspect-ratio: auto;
    }
    .block-posts-slider .swiper-header {
        margin-bottom: 3.125rem;
    }
    .block-posts-slider .post .image-wrapper {
        padding: 1.25rem;
    }
}