.event-card-carousel {
  background: var(--wp--preset-color-gray-light);
  max-width: calc(var(--content-max-width) + var(--carousel-padding-right));
  margin-left: calc(var(--side-gap) - var(--slide-padding-inline)) !important;
  --slide-padding-inline: 0.4rem;
  --slide-padding-block-end: 1rem;
  --list-padding-right-lg: 50px;
  --carousel-padding-right: 4.5rem;
}

@media (max-width: 880px) {
  .grid-heading {
  padding: 0 .2rem;
  }
}

@media (min-width: 520px) {
  .event-card-carousel {
    width: calc(var(--content-width) + var(--carousel-padding-right));
    --slide-padding-inline: .75rem;
    --carousel-padding-right: 5rem;
  }
}

.event-card-carousel:not(.slick-initialized) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden
}

.event-card-carousel:not(.slick-initialized) > div {
  flex-shrink: 0;
  max-width: 93.65%
}

@media (min-width: 520px) {
  .event-card-carousel:not(.slick-initialized) > div {
    max-width: 49.79%
  }
}

@media (min-width: 880px) {
  .event-card-carousel:not(.slick-initialized) > div {
    max-width: 33.333%
  }
}

@media (min-width: 1320px) {
  .event-card-carousel:not(.slick-initialized) > div {
    max-width: 24.96%
  }
}

.event-card-carousel:not(.slick-initialized) > div,
.event-card-carousel .slick-track {
  --slide-width-ratio: 1;
  --slide-width: calc(100cqi / var(--slide-width-ratio));
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--slide-width));
  grid-template-rows:  [card-start img-start] auto [img-end content-start category-start] auto [category-end title-start] auto [title-end date-n-venue-start] auto [date-n-venue-end content-end card-end];
}

.event-card-carousel .slick-track {
  min-width: 100% !important;
}

@media screen and (min-width: 520px) {
  .event-card-carousel:not(.slick-initialized) > div,
  .event-card-carousel .slick-track {
     --slide-width-ratio: 2;
  }
}

@media screen and (min-width: 880px) {
  .event-card-carousel:not(.slick-initialized) > div,
  .event-card-carousel .slick-track {
     --slide-width-ratio: 3;
  }
}

@media screen and (min-width: 1320px) {
  .event-card-carousel:not(.slick-initialized) > div,
  .event-card-carousel .slick-track {
     --slide-width-ratio: 4;
  }
}

.event-card-carousel .slick-slide {
  height: auto;
  padding-inline: var(--slide-padding-inline);
  padding-block-end: var(--slide-padding-block-end);
  grid-row: card;
  display: grid;
  grid-template-rows: subgrid;
  width: var(--slide-width) !important;
}

.event-card-carousel .slick-slide:not(.slick-active) .event-card {
  box-shadow: none;

}

.event-card-carousel .event-card {
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-row: card;
  grid-template-rows: subgrid;
}

.event-card-carousel .event-card > a {
  display: grid;
  grid-row: card;
  grid-auto-flow: column;
  grid-template-rows: subgrid;
}

.event-card-carousel .slick-list {
  padding-right: var(--carousel-padding-right);
  container-type: inline-size;
  container-name: slides;
}

@media (min-width: 782px) {
  .event-card-carousel .slick-list {
    padding-right: var(--carousel-padding-right);
  }
}

.event-card-carousel .slick-list:after {
  position: absolute;
  content: '';
  width: 3rem;
  height: 100%;
  background: linear-gradient(270deg, #F5F5F5 4%, rgba(245, 245, 245, 0) 97%);
  top: 0;
  right: 0;
  z-index: 1;
}

@media (min-width: 782px) {
  .event-card-carousel .slick-list:after {
    width: 90px;
  }
}

.event-card-carousel .slick-arrow.slick-disabled {
  visibility: hidden;
  opacity:0;
}

@media (min-width: 782px) {
  .event-card-carousel .slick-arrow {
    position: absolute;
    width: 72px;
    height: 72px;
    background-color: #fff;
    border-radius: 50%;
    border-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 10;
    filter: drop-shadow(4px 4px 0.5rem rgba(0, 0, 0, .25));
    opacity:1;
    transition: opacity 0.25s ease-out;

  }

  .event-card-carousel .slick-arrow:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    top: 50%;
    left: 50%;
    border: 3px solid #000;
  }

  .event-card-carousel .slick-arrow:hover {
    cursor: pointer;
  }

  .event-card-carousel .slick-prev {
    left: -2rem;
  }

  .event-card-carousel .slick-prev:before {
    transform: translate(-6px, -50%) rotate(45deg);
    border-right-width: 0;
    border-top-width: 0;
  }

  .event-card-carousel .slick-next {
    right: 16px;
  }

  .event-card-carousel .slick-next:before {
    transform: translate(-12px, -50%) rotate(45deg);
    border-left-width: 0;
    border-bottom-width: 0;
  }

}

.event-card-grid__load-more-button-wrapper {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 3rem;
}

@media (max-width: 549px) {
  .event-card-grid__load-more-button-wrapper {
    margin-top: 2rem;
  }
}

.event-card-grid ol.events-grid {
  max-width: calc(var(--content-width) + (2 * var(--slide-padding-inline)));
  margin-top: 0;
}

@media (max-width: 880px) {
  .event-card-grid ol.events-grid {
    --slide-padding-inline: 0.4rem;
    max-width: calc(var(--content-width) + var(--slide-padding-inline));
    column-gap: 0.6rem;
  }
}


.event-card-grid__loading-spinner {
  display: block;
  margin: 12px auto 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}