:root {
  --main-solid: #020D2C;
  --main: #020D2C;
  --main-trans: linear-gradient(90deg, rgba(2, 13, 44, 0.6), rgba(7, 43, 141, 0.6));
  --accent: #6DB847;
  --accent-gradient: linear-gradient(125deg, #a7d491, rgba(109, 184, 71, 0.6));
  --accent-gradient-trans: linear-gradient(125deg, #a7d491, rgba(109, 184, 71, 0.6));
  --secondary: #efefef;
  --secondary-gradient: linear-gradient(125deg, #efefef, #bdbdbd);
  --secondary-gradient-trans: linear-gradient(125deg, rgba(240, 240, 240, 0.6), rgba(189, 189, 189, 0.6));
  --bg: #fff;
  --dark: #020D2C;
  --dark-gradient: linear-gradient(90deg, #020D2C, #072b8d);
  --dark-gradient-trans: linear-gradient(90deg, rgba(2, 13, 44, 0.6), rgba(7, 43, 141, 0.6));
  --defVal: 10px;
  --text-v1: #fff;
}

::-moz-selection {
  color: var(--bg);
  background: var(--secondary);
}

::selection {
  color: var(--bg);
  background: var(--secondary);
}

.events-hero {
  position: relative;
}

.events-hero__featured {
  top: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  background: var(--secondary-gradient);
}

.events-hero__featured > .events-promo__bg-cont {
  display: none;
}

.events-item {
  background: var(--secondary-gradient);
  color: var(--dark);
  border-radius: 5px;
}

.events-item__media-cont {
  overflow: hidden;
  border-radius: 5px;
  max-height: 150px;
}

@supports (display: flex) {
  .events-item__action-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}