/* stylelint-disable */
/* stylelint-disable max-line-length */
:root {
  --breakpoint-xxxl: 2560px;
  --breakpoint-xxl: 1920px;
  --breakpoint-xl: 1440px;
  --breakpoint-lg: 1280px;
  --breakpoint-md: 1024px;
  --breakpoint-md-s: 992px;
  --breakpoint-sm: 768px;
  --breakpoint-xs: 512px;
  --breakpoint-xxs: 390px;
}

/* stylelint-disable */ /* stylelint-disable */ /* stylelint-disable */
/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);

  or object-fit and object-position:
  @include object-fit(cover, top);
*/
.events-block {
  z-index: 2;
  position: relative;
  margin-top: 200px;
  padding-bottom: 90px;
}
@media (min-width: 992px) {
  .events-block {
    margin-top: 180px;
    min-height: 100vh;
  }
}
.events-block--header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.events-block--header-image {
  height: 240px;
  position: absolute;
  left: 30px;
  z-index: -2;
}
.events-block--header-image.sticky {
  position: fixed;
  top: 150px;
}
.events-block--header-image img {
  max-height: 100%;
  width: auto;
}
@media (max-width: 992px) {
  .events-block--header-image {
    height: 160px;
    left: 0;
  }
}
.events-block--background {
  position: absolute;
  right: 0;
  z-index: 0;
}
.events-block--background.sticky {
  position: fixed;
  top: 0;
}
.events-block--background .events-background--shape {
  width: 42vw;
  transform: translateY(-26%);
  position: sticky;
  top: 0;
}
@media (max-width: 992px) {
  .events-block--background .events-background--shape {
    width: 42vw;
    transform: unset;
  }
}
.events-block--background .events-background--mcgruff {
  position: absolute;
  top: 110px;
  right: 5vw;
  z-index: 2;
  width: 32vw;
}
@media (max-width: 992px) {
  .events-block--background .events-background--mcgruff {
    width: 69vw;
    right: -5vw;
    transform: translateY(20%);
    bottom: 0;
    top: unset;
  }
}
@media (max-width: 992px) {
  .events-block--background .events-background {
    height: 420px;
  }
  .events-block--background .events-background--shape {
    width: auto;
  }
  .events-block--background .events-background--shape img {
    width: auto;
    max-height: 420px;
  }
  .events-block--background .events-background--mcgruff {
    width: 274px;
  }
  .events-block--background .events-background--mcgruff img {
    max-height: 360px;
    width: auto;
  }
}
@media (max-width: 992px) {
  .events-block--background {
    transform: translateY(-43%);
    z-index: -1;
  }
}
.events-block--background img {
  max-width: 100%;
  height: auto;
}
.events-block--grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 30px;
  margin-top: 90px;
}
.events-block--grid-no-events {
  margin-top: 150px;
}
@media (max-width: 992px) {
  .events-block--grid {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 200px;
  }
}
.events-block--grid--empty {
  margin-top: 150px;
}
.events-block .events-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.events-block .events-empty a {
  margin-top: 48px;
}
@media (max-width: 992px) {
  .events-block .events-empty {
    margin-top: 30px;
  }
  .events-block .events-empty br {
    display: none;
  }
  .events-block .events-empty a {
    margin-top: 40px;
  }
}
.events-block .events {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 60px;
}
.events-block .events > * {
  width: calc(50% - 30px + 15px);
}
@media (max-width: 992px) {
  .events-block .events {
    -moz-column-count: 1;
         column-count: 1;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
  .events-block .events > * {
    width: 100%;
  }
}
.events-block .load-more {
  margin-top: 54px;
  display: flex;
  justify-content: space-around;
}