:root {
  --kics-rsg-gap: 28px;
  --kics-rsg-radius: 56px;
  --kics-rsg-height-desktop: 340px;
  --kics-rsg-height-mobile: 320px;
  --kics-rsg-spin-duration: 1400ms;
  --kics-rsg-hover-zoom: 1.06;
  --kics-rsg-offset-strength: 28px;
}

.kics-rsg {
  position: relative;
  width: 100%;
}

.kics-rsg-track {
  display: grid;
  gap: var(--kics-rsg-gap);
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.kics-rsg-track-desktop {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kics-rsg-track-mobile {
  display: none;
  grid-template-columns: 1fr;
}

.kics-rsg-card {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0 0 var(--kics-rsg-radius) 0;
  min-height: var(--kics-rsg-height-desktop);
  transform: translate3d(0, 0, 0);
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
  will-change: transform, opacity;
}

.kics-rsg-card img {
  display: block;
  width: 100%;
  height: var(--kics-rsg-height-desktop);
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s ease;
  backface-visibility: hidden;
}

.kics-rsg-track-desktop .kics-rsg-card:nth-child(1) {
  transform: translateY(calc(var(--kics-rsg-offset-strength) * -1));
}

.kics-rsg-track-desktop .kics-rsg-card:nth-child(2) {
  transform: translateY(var(--kics-rsg-offset-strength));
}

.kics-rsg-track-desktop .kics-rsg-card:nth-child(3) {
  transform: translateY(calc(var(--kics-rsg-offset-strength) * -0.6));
}

@media (hover: hover) and (pointer: fine) {
  .kics-rsg-card:hover img {
    transform: scale(var(--kics-rsg-hover-zoom));
  }
}

.kics-rsg-track-mobile .kics-rsg-card,
.kics-rsg-track-mobile .kics-rsg-card img {
  min-height: var(--kics-rsg-height-mobile);
  height: var(--kics-rsg-height-mobile);
}

.kics-rsg-track-mobile .kics-rsg-card {
  transform: translateY(0);
}

.kics-rsg-track.is-spinning .kics-rsg-card.is-new {
  animation: kics-rsg-bandit var(--kics-rsg-spin-duration) cubic-bezier(.2,.8,.2,1);
}

.kics-rsg-track.is-spinning .kics-rsg-card.is-new:nth-child(1) {
  animation-delay: 0ms;
}

.kics-rsg-track.is-spinning .kics-rsg-card.is-new:nth-child(2) {
  animation-delay: 90ms;
}

.kics-rsg-track.is-spinning .kics-rsg-card.is-new:nth-child(3) {
  animation-delay: 180ms;
}

.kics-rsg-track .kics-rsg-card.is-new {
  opacity: .2;
  filter: blur(6px);
}

.kics-rsg-track .kics-rsg-card.is-new.is-visible {
  opacity: 1;
}

@keyframes kics-rsg-bandit {
  0% {
    opacity: 0;
    filter: blur(8px);
  }
  12% {
    transform: translateY(-80px) scale(.98);
    opacity: .25;
    filter: blur(8px);
  }
  32% {
    transform: translateY(55px) scale(.985);
    opacity: .5;
    filter: blur(5px);
  }
  58% {
    transform: translateY(-28px) scale(.995);
    opacity: .78;
    filter: blur(3px);
  }
  78% {
    transform: translateY(12px) scale(1);
    opacity: .94;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.kics-rsg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  cursor: zoom-out;
}

.kics-rsg-lightbox[hidden] {
  display: none !important;
}

.kics-rsg-lightbox-inner {
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kics-rsg-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
}

body.kics-rsg-lightbox-open {
  overflow: hidden;
}

.kics-rsg-empty {
  padding: 20px;
  border: 1px dashed #c7c7c7;
  border-radius: 10px;
  background: #fafafa;
}

@media (max-width: 767px) {
  .kics-rsg-track-desktop {
    display: none;
  }

  .kics-rsg-track-mobile {
    display: grid;
  }
}