/* {outputFileName:activity-list} */
/* We declare colors in a map as key: value
with the color name as the key and the hex
as the value

And we are goint to use it in _utils.scss */
.activity__list_section {
  position: relative;
  z-index: 1;
  max-width: 45rem;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 5rem;
  text-align: center;
}
.activity__list_section .button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  margin-right: auto;
  margin-bottom: 1.5rem;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.0081rem;
}
@media screen and (min-width: 768px) {
  .activity__list_section .button {
    width: 28.125rem;
    margin-top: 3rem;
  }
}
.activity__list_section .slider__text {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: 0.35px;
}
.activity__list_section .slider__text,
.activity__list_section .heading__slides {
  max-width: 52ch;
  margin-right: auto;
  margin-left: auto;
  font-weight: 500;
  color: #383838;
}
@media screen and (min-width: 1200px) {
  .activity__list_section .slider__text,
  .activity__list_section .heading__slides {
    max-width: 72ch;
  }
}
.activity__list_section .heading__slides {
  height: auto;
}
.activity__list_section .heading__slides_text {
  cursor: default;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 2.25rem;
  color: #3d43bf;
  letter-spacing: 0.0262rem;
}
@media screen and (max-width: 500px) {
  .activity__list_section .heading__slides_text {
    max-width: 22ch;
    margin: auto;
    padding: 0 10px;
  }
}
@media screen and (min-width: 601px) {
  .activity__list_section .heading__slides_text {
    margin-top: 0.5rem;
  }
}
@media screen and (min-width: 1280px) {
  .activity__list_section .heading__slides_text {
    margin-top: 0;
    font-size: 2.1875rem;
    line-height: 2.8125rem;
  }
}
.activity__list_section .imgs__nav {
  padding-top: 1rem;
}
.activity__list_section .imgs__nav .splide__pagination {
  top: 0;
  overflow-y: hidden;
  display: flex;
  background-color: transparent;
}
.activity__list_section .imgs__nav .splide__pagination__page {
  width: 22px;
  height: 22px;
  opacity: 1;
  background-color: #dbeaef;
}
.activity__list_section .imgs__nav .splide__pagination__page.is-active {
  transform: scale(1.2);
  background-color: #7179cd;
  border: 0;
}
@media screen and (max-width: 1364px) {
  .activity__list_section .imgs__nav {
    padding-top: 5rem;
  }
}
.activity__list_section .splide__slide {
  padding: 0;
}
.activity__list_section .splide__slide .activity__image_wrapper {
  position: relative;
}
.activity__list_section .splide__slide .activity__image {
  cursor: pointer;
  position: relative;
  z-index: 1;
  display: block;
  width: 250px;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.activity__list_section .splide__slide .activity__image.--default {
  z-index: 1;
  opacity: 1;
}
.activity__list_section .splide__slide .activity__image.--hover, .activity__list_section .splide__slide .activity__image.--active {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
@media screen and (min-width: 640px) {
  .activity__list_section .splide__slide .activity__image {
    width: 100%;
  }
}
.activity__list_section .splide__slide:hover, .activity__list_section .splide__slide:focus {
  border: 0 !important;
}
.activity__list_section .splide__slide:hover .--default, .activity__list_section .splide__slide:focus .--default {
  z-index: -1;
  opacity: 0;
}
.activity__list_section .splide__slide:hover .--hover, .activity__list_section .splide__slide:focus .--hover {
  z-index: 2;
  opacity: 1;
}
.activity__list_section .splide__slide.is-active {
  border: 0 !important;
}
.activity__list_section .splide__slide.is-active .--hover {
  z-index: -1;
  opacity: 0;
}
.activity__list_section .splide__slide.is-active:focus .--hover {
  z-index: -1;
  opacity: 0;
}
.activity__list_section .splide__slide.is-active .--active {
  z-index: 2;
  opacity: 1;
}
.activity__list_section .splide__slide.is-active .--default {
  z-index: -1;
  opacity: 0;
}