.events-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  max-width: 128rem !important;
  padding-bottom: 4rem;
  position: relative;
  text-align: left;
}

.pattern-right {
  position: relative;
  background: url('/wp-content/uploads/2023/02/pattern-right.svg');
  background-position: 92% 50%;
  background-repeat: no-repeat;
  text-align: center;
  padding-inline: 1.5rem;
}

.event-card {
  background-color: var(--clr-white);
  transition: opacity ease-in-out 250ms;
  position: relative;
  max-width: 40rem;
  display: grid;
  visibility: hidden;
  position: absolute;
  opacity: 0;
  z-index: -999;
}

.event-card--active:nth-child(-n + 3) {
  position: initial;
  display: grid;
  visibility: visible;
  opacity: 1;
  z-index: initial;
}

.event-card--active {
  position: initial;
  display: grid;
  visibility: visible;
  opacity: 1;
  z-index: initial;
}

.event-link {
  text-decoration: none;
  aspect-ratio: 16/9;
  /* height: 27.9rem; */
}
.event-link img,
.event-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-image {
  height: 100%;
  position: relative;
}

.event-expire {
  position: absolute;
  display: block;
  left: 0;
  top: 2.6rem;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: var(--font-bold);
  max-width: 9rem;
  background-color: var(--clr-accents-orange);
  color: var(--clr-white);
  padding: 0.8rem;
}
.event-image__expire img {
  filter: opacity(0.5);
}

.event-wrapper {
  display: grid;
  padding: 2rem 2rem 2.7rem 2rem;
  box-shadow: var(--shadow);
  background-color: var(--clr-white);
}

.event-date {
  font-size: var(--body-small-font-size);
  color: var(--opacity-50);
}

.event-title {
  font-size: 2rem;
  color: var(--clr-black);
  font-weight: var(--font-bold);
  padding: 1rem 0 2rem 0;
}

.event-descp {
  color: var(--opacity-50);
  font-size: var(--body-font-size);
  padding-bottom: 2rem;
}

/* tabs */



.events-tabs {
  max-width: 74.4rem;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  padding-bottom: 3.2rem;
}

.event-tab {
  position: relative;
  text-transform: uppercase;
  font-weight: var(--font-bold);
  cursor: pointer;
}

.event-tab:not(:last-child)::before {
  content: '';
  position: absolute;
  right: -2.5rem;
  top: 50%;
  width: 2px;
  height: 2.9rem;
  background: var(--clr-black);
  transform: translateY(-50%);
}
.event-tab--active {
  position: relative;
}
.event-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 100%;
  height: 2px;
  background-color: var(--clr-accents-orange);
}

.ni-dogodkov {
  font-size: var(--h4-font-size);
  text-align: center;
  margin: 0 auto;
}

@media (min-width: 2100px) {
  .pattern-right {
    background-position: 82% 50%;
  }
}
@media (max-width: 992px) {
  .events-cards,
  .events-tabs {
    overflow: scroll;
    scroll-snap-type: x mandatory;
    justify-content: revert !important;
    display: flex !important;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
  }
  .events-cards::-webkit-scrollbar,
  .events-tabs::-webkit-scrollbar {
    display: none;
  }
  .event-tab {
    min-width: 13rem;
    scroll-snap-align: start;
  }
  .event-card {
    scroll-snap-align: start;
    min-width: 35rem;
  }

  .pattern-right {
    background: none;
  }
}

@media (max-width: 600px) {
  .event-card {
    scroll-snap-align: start;
    min-width: 32rem;
  }
}