.products-display{
    width: 100%;
    max-width: 100%;
    margin: var(--block-margin) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}

.products-display.animate__animated{
    animation-name: fadeInUp;
}

.products-display-heading{
    width: 100%;
    max-width: var(--wide-width);
    margin: 0 auto;
}

.products-display-container{
    position: relative;
}

.products-display-grid{
    width: 100%;
    max-width: var(--wide-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--item-row-gap);
    column-gap: var(--item-column-gap);
}

.products-display-carousel .products-display-item{
    width: calc(min(29.333rem, 90vw) + (var(--item-column-gap) / 1));
    padding: 0 calc(var(--item-column-gap) / 2);
}

.products-display-navigation{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--page-padding) 0;
    position: absolute;
    top: 15.7rem;
    transform: translateY(-50%);
    left: var(--page-padding);
    max-width: var(--wide-width);
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.products-display-navigation button{
    width: 7.2rem;
    height: 7.2rem;
    pointer-events: all;
}

.products-display-navigation button:disabled{
    opacity: 0;
    pointer-events: none;
}

.products-display-navigation-prev{
    transform: translateX(calc(var(--page-padding) * -1));
}

.products-display-navigation-next{
    transform: translateX(var(--page-padding));
}

.products-display-navigation button svg *{
    transition: all 0.3s ease;
}

.products-display-navigation button svg rect{
    fill: var(--color-white);
}

.products-display-navigation button:is(:hover, :focus, :active){
    outline: none;
}

.products-display-navigation button:is(:hover, :focus, :active) svg rect{
    fill: var(--color-blue);
}

.products-display-navigation button svg path{
    stroke: var(--color-blue);
}

.products-display-navigation button:is(:hover, :focus, :active) svg path{
    stroke: var(--color-white);
}

@media (max-width: 767px){
    .post-loop-literature-meta{
        display: block;
        min-height: 2lh;
    }
}

@media (min-width: 768px){
    .products-display-carousel .swiper-wrapper{
        padding-left: calc(((100% - var(--wide-width)) / 2) - (var(--item-column-gap) / 2));
    }
}

@media (min-width: 992px){
    .products-display-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px){
    .products-display{
        --half-column-gap: calc(var(--column-gap) / 2);
        --half-outside-width: calc((100% - var(--wide-width)) / 2);
        --effective-left-column-width: calc(24rem + var(--half-column-gap));
        --effective-right-column-width: calc(var(--wide-width) - var(--effective-left-column-width));

        --left-column-width: calc(var(--effective-left-column-width) + var(--half-outside-width) - var(--half-column-gap));
        --left-column-inner-width: calc(var(--effective-left-column-width) - var(--half-column-gap));
        --right-column-width: calc(var(--effective-right-column-width) + (var(--half-outside-width) - var(--half-column-gap)));
        --right-column-inner-width: calc( var(--effective-right-column-width) - var(--half-column-gap));

        grid-template-columns: var(--left-column-width) var(--right-column-width);
    }

    .products-display-heading{
        max-width: var(--left-column-inner-width);
        margin: 0 0 0 auto;
    }

    .products-display-grid{
        max-width: var(--right-column-inner-width);
        margin: 0 auto 0 0;
    }
        
    .products-display-carousel{
        max-width: calc(100% + (var(--item-column-gap) / 2));
        margin: 0 auto 0 calc(var(--item-column-gap) / -2);
    }

    .products-display-carousel .swiper-wrapper{
        padding-left: 0;
    }

    .products-display-carousel .products-display-item:last-child{
        margin-right: calc(((100vw - var(--wide-width)) / 2) - var(--item-column-gap) + var(--page-padding) - 0.3rem);
    }

    .products-display-navigation{
        max-width: var(--right-column-inner-width);
        left: 0;
    }
}