.blog-listing {
  color: var(--brand-primary-color);
  z-index: auto;
  background: radial-gradient(236.3% 236.3% at 50% 50%, rgb(255, 255, 255) 0%, rgb(0, 174, 239) 100%);
}
@media (min-width: 1025px) {
  .blog-listing {
    padding: 11.125rem 0 11.3125rem;
  }
}
.blog-listing h2 {
  margin: 0 0 2.5rem;
}
@media (min-width: 1025px) {
  .blog-listing h2 {
    margin: 0 0 3.875rem;
  }
}
.blog-listing__swiper {
  --amount-items: 3;
  --space-between: 2.3125rem;
  margin: 0 calc(var(--space-between) / -2);
}
@media (max-width: 1024px) {
  .blog-listing__swiper {
    --amount-items: 2;
  }
}
@media (max-width: 768px) {
  .blog-listing__swiper {
    --amount-items: 1;
  }
}
.blog-listing__swiper .swiper-wrapper:has(+ .swiper-scrollbar-lock) {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}
.blog-listing__swiper .swiper-slide {
  height: auto;
  width: calc(100% / var(--amount-items));
  padding: 0 calc(var(--space-between) / 2);
}
.blog-listing__swiper .swiper-scrollbar {
  position: relative;
  top: unset;
  bottom: unset;
  left: unset;
  -webkit-transform: unset;
          transform: unset;
  background: none;
  width: calc(100% - var(--space-between));
  height: 0.4375rem;
  margin: 4.75rem auto 0;
}
@media (max-width: 576px) {
  .blog-listing__swiper .swiper-scrollbar {
    margin-top: 2.1875rem;
  }
}
.blog-listing__swiper .swiper-scrollbar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 0.0625rem;
  width: 100%;
  background-color: var(--brand-quaternary-color);
}
.blog-listing__swiper .swiper-scrollbar-drag {
  cursor: -webkit-grab;
  cursor: grab;
  height: 100%;
  border-radius: 1.25rem;
  background-color: var(--brand-primary-color);
}
.blog-listing.template-2 {
  position: relative;
  background: radial-gradient(236.3% 236.3% at 50% 50%, rgb(255, 255, 255) 0%, rgb(0, 174, 239) 100%);
  padding: 0;
}
.blog-listing.template-2::before {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--brand-primary-color);
}
@media (min-width: 1025px) {
  .blog-listing.template-2 {
    padding: 8.375rem 0 5rem;
  }
}
.blog-listing.template-2 h2 {
  color: var(--brand-secondary-color);
  text-align: center;
}
@media (min-width: 1025px) {
  .blog-listing.template-2 h2 {
    margin: 0 0 4.6875rem;
  }
}
.blog-listing.template-3 {
  background: var(--brand-primary-color);
  color: var(--brand-secondary-color);
}
@media (min-width: 1025px) {
  .blog-listing.template-3 {
    padding: 17.8125rem 0 5rem;
  }
}
.blog-listing.template-3 .swiper-scrollbar::before {
  background-color: var(--brand-secondary-color);
}
.blog-listing.template-3 .swiper-scrollbar-drag {
  background-color: var(--brand-tertiary-color);
}
@media (min-width: 1025px) {
  .blog-listing.template-4 .section-decor {
    top: -60%;
    right: -15%;
    width: 100rem;
  }
}

.blog-listing {
  position: relative;
  background: var(--brand-blue-gradient); /* Ensure this is set */
  color: var(--brand-primary-color);
  z-index: 1; /* Ensure content is above the background */
}

.blog-listing .blog-listing-video-bg {
top: 0;
  right: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -100;
  mask-image: -webkit-gradient(linear, left top, left bottom, from(var(--brand-primary-color)), to(transparent));
  mask-image: linear-gradient(var(--brand-primary-color), transparent);
  mask-mode: alpha;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(var(--brand-primary-color)), to(transparent));
  -webkit-mask-image: linear-gradient(var(--brand-primary-color), transparent);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  z-index: -1;
}

.blog-listing .blog-listing-video-bg video {
-o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
}