#cursor {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: difference;
}

@media (hover: hover) and (pointer: fine) {
  .cursor__circle {
    width: 64px;
    height: 64px;
    margin-top: -50%;
    margin-left: -50%;
    border-radius: 50%;
    border: solid 1px rgba(255, 255, 255, 1);
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

@media (hover: hover) and (pointer: fine) {
  #cursor.prev .cursor__circle, #cursor.next .cursor__circle {
    width: 128px;
    height: 128px;
    background-color: #FFF;
    border-color: #FFF;
  }
}

@media (hover: hover) and (pointer: fine) {
  #cursor.prev::after, #cursor.next::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/graphics/arrows_next.svg');
    background-repeat: no-repeat;
    background-position: center;
  }
}

@media (hover: hover) and (pointer: fine) {
  #cursor.prev::after {
    background-image: url('../../assets/img/graphics/arrows_prev.svg');
  }
}

@media (hover: hover) and (pointer: fine) {
  #cursor.subtle .cursor__circle {
    opacity: 0.16;
  }
}

@media (hover: hover) and (pointer: fine) {
  #cursor.overlay .cursor__circle {
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: transparent;
  }
}

.swiper-button-prev, swiper-button-next {
  cursor: pointer;
}