:root {
    --breakpoint-full: 1500px;
    --breakpoint-big-tablet: 1200px;
    --breakpoint-medium-tablet: 1024px;
    --breakpoint-tablet: 991px;
    --breakpoint-mobile: 768px;
    --breakpoint-medium-mobile: 640px;
    --max-width: 1440px;
}

.upcoming-events-container .content-cards-wrapper .event-cards .slick-track {
    height: 100% !important;
    @media (max-width: 769px) {
      display: flex;
      min-height: 500px;
    }
  }
  
  @media (max-width: var(--breakpoint-mobile)) {
    .upcoming-events-container .content-cards-wrapper .event-cards .slick-track {
      display: flex;
      align-items: stretch;
      gap: 20px;
      min-height: 500px;
    }
  }
  
  .upcoming-events-container .content-cards-wrapper .event-cards .slick-slide {
    transition: opacity 0.3s ease, margin 0.3s ease;
    height: calc(90% - 20px) !important;
    max-height: 620px;
    padding: 16px;
    overflow: hidden;
    transform: scale(1);
    @media (min-width: 768px) {
      opacity: 0.5;
    }
    @media (max-width: 768px) {
      height: auto !important;
    }
  }
  
  @media (max-width: var(--breakpoint-big-tablet)) {
    .upcoming-events-container .content-cards-wrapper .event-cards .slick-slide {
      height: calc(100% - 60px) !important;
    }
  }
  
  @media (max-width: var(--breakpoint-mobile)) {
    .upcoming-events-container .content-cards-wrapper .event-cards .slick-slide {
      height: auto !important;
      max-height: unset;
      display: flex;
      margin: 0;
      padding: 0;
      transform: none;
      opacity: 1;
    }
  }
  
  .upcoming-events-container
    .content-cards-wrapper
    .event-cards
    .slick-slide
    > div {
    width: 100%;
    height: 100%;
  }
  
  .upcoming-events-container
    .content-cards-wrapper
    .event-cards
    .slick-slide
    > div
    > .event-item {
    width: auto;
    height: 100%;
  }
  
  @media (max-width: var(--breakpoint-mobile)) {
    .upcoming-events-container
      .content-cards-wrapper
      .event-cards
      .slick-slide
      > div
      > .event-item {
      margin: 0;
    }
  }
  
  .upcoming-events-container .content-cards-wrapper .event-item p,
  .upcoming-events-container .content-cards-wrapper .event-item span {
    color: var(--white);
  }