@media screen and ( min-width: 1024px) {.posts-swiper .offset-container {
      max-width: calc(100vw - 16px);

      margin: 0 0 0 16px
  }
    }
    @media screen and ( min-width: 1320px ) {.posts-swiper .offset-container {
      max-width: calc(1280px + ((100vw - 1280px) / 2 ));

      margin: 0 0 0 calc((100vw - 1280px) / 2)
  }
    }
  /* Setting dimenions here in order to override default swiper applied styles. */
  .posts-swiper.swiper-large .swiper-slide {
      height: auto;
    }
  .posts-swiper.swiper-large .swiper-container, .posts-swiper.swiper-large .swiper-wrapper {
      align-items: stretch;
      padding-bottom: 0.5rem;
    }
  .posts-swiper.swiper-small .swiper-slide {
      height: 16rem;
      width: 16rem;
    }
  .posts-swiper.swiper-small .swiper-slide::before {
        content: '';
        background-color: var(--accent-700, #7117AE);
        display: block;
        height: 100%;
        pointer-events: none;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 0px;
        z-index: 20;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        transition-duration: 300ms;
      }
  .posts-swiper.swiper-small .swiper-slide:hover::before {
          width: 0.25rem;
        }
  .posts-swiper .swiper-button-disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
  }