.stories-main-page {
  position: relative;
  display: flex;
  justify-content: center;
  margin-left: calc(var(--padding-container-left) * -1);
  margin-right: calc(var(--padding-container-right) * -1);
}
@media (any-hover: hover) {
  .stories-main-page:hover .keen-slider__arrow:not(:disabled) {
    opacity: 1;
    pointer-events: all;
  }
}
.stories-main-page__slider:not(.keen-slider--active) {
  width: fit-content;
  gap: 8px;
}
@media (min-width: 768px) {
  .stories-main-page__slider:not(.keen-slider--active) {
    gap: 16px;
  }
}
@media (min-width: 1440px) {
  .stories-main-page__slider:not(.keen-slider--active) {
    gap: 24px;
  }
}
.stories-main-page__slide {
  --dimension: 80px;
  color: var(--primary);
  transition-property: color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
@media (hover: hover) {
  .stories-main-page__slide:hover {
    color: var(--primary-hover);
  }
}
.stories-main-page__slide:focus {
  outline: none;
}
.stories-main-page__slide:active {
  color: var(--primary-active);
}
.stories-main-page__slide:disabled {
  color: var(--secondary-500);
  cursor: auto;
}
.stories-main-page__slide {
  display: flex;
  flex-direction: column;
  width: var(--dimension) !important;
  min-width: var(--dimension) !important;
  max-width: var(--dimension) !important;
  color: var(--dark);
  cursor: pointer;
}
@media (min-width: 768px) {
  .stories-main-page__slide {
    --dimension: 120px;
  }
}
@media (any-hover: hover) {
  .stories-main-page__slide:hover .stories-main-page__image-container::after {
    opacity: 0.3;
  }
  .stories-main-page__slide:hover .stories-main-page__image {
    transform: scale(1.2);
  }
}
.stories-main-page__image-container {
  position: relative;
  width: var(--dimension);
  height: var(--dimension);
  border: 1px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
}
.stories-main-page__image-container:has([data-lazy-load=true])::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  background-color: var(--dark);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
}
@media (min-width: 768px) {
  .stories-main-page__image-container:has([data-lazy-load=true])::after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
}
.stories-main-page__image-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .stories-main-page__image-wrapper {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
}
.stories-main-page__image {
  position: relative;
  border-radius: inherit;
  transition: transform var(--transition);
  z-index: -1;
}
.stories-main-page__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-weight: 500;
  text-align: center;
}
@media (max-width: (min-width: 576px)) {
  .stories-main-page__title {
    font-size: 14px;
  }
}
.stories-main-page .keen-slider__arrow {
  --sides-offset: 8px;
  position: absolute;
  top: 48px;
  display: none;
  transition: opacity var(--transition);
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 1025px) {
  .stories-main-page .keen-slider__arrow {
    display: flex;
  }
}
@media (min-width: 1440px) {
  .stories-main-page .keen-slider__arrow {
    --sides-offset: calc(8px + (56 - 8) * (100vw - 1440px) / (1920 - 1440));
  }
}
@media (min-width: 1920px) {
  .stories-main-page .keen-slider__arrow {
    --sides-offset: 56px;
  }
}
.stories-main-page .keen-slider__arrow--prev {
  left: var(--sides-offset);
}
.stories-main-page .keen-slider__arrow--next {
  right: var(--sides-offset);
}
/*# sourceMappingURL=style.css.map */