/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

.rotary-gallery-loop {
  --slide-size: clamp(11rem, 24vw, 40rem);
  --image-size: clamp(7rem, 16vw, 17rem);
  --gallery-gap: clamp(1rem, 2.4vw, 3rem);
  --gallery-speed: 28s;

  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: #0b0b0b;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.rotary-gallery-loop,
.rotary-gallery-loop * {
  box-sizing: border-box;
}

.rotary-gallery-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  animation: rotaryGalleryScroll var(--gallery-speed) linear infinite;
  will-change: transform;
}

.rotary-gallery-set {
  display: flex;
  align-items: center;
  gap: var(--gallery-gap);
  padding-right: var(--gallery-gap);
  flex: 0 0 auto;
  width: max-content;
}

.rotary-gallery-slide {
  inline-size: var(--slide-size);
  flex: 0 0 var(--slide-size);
  display: grid;
  place-items: center;
  overflow: visible;
}

.rotary-gallery-image {
  display: block !important;
  width: auto !important;
  height: var(--image-size) !important;
  max-width: 100% !important;
  max-height: var(--image-size) !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
}

@keyframes rotaryGalleryScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 1024px) {
  .rotary-gallery-loop {
    --slide-size: clamp(12rem, 34vw, 22rem);
    --image-size: clamp(7rem, 22vw, 13rem);
    --gallery-gap: clamp(1rem, 3vw, 2rem);
    --gallery-speed: 24s;
  }
}

@media (max-width: 600px) {
  .rotary-gallery-loop {
    --slide-size: clamp(9.5rem, 52vw, 15rem);
    --image-size: clamp(6rem, 34vw, 10rem);
    --gallery-gap: clamp(0.9rem, 4vw, 1.5rem);
    --gallery-speed: 22s;
    padding-block: clamp(2rem, 8vw, 3.5rem);
  }
}