:root{
  /* размер квадратного превью */
  --thumb-size-desktop: 120px;
  --thumb-size-mobile: 80px;

  --thumb-gap: 10px;
  --thumb-radius: 10px;

  /* стрелки */
  --thumb-btn-size: 42px;
  --thumb-btn-bg: rgba(0,0,0,.35);
  --thumb-btn-fg: #fff;
}

@media (max-width: 640px){
  :root{
    --thumb-gap: 6px;
    --thumb-radius: 8px;
    --thumb-btn-size: 36px;
  }
}

/* wrapper for arrows */
.wpw-thumbstrip-wrap{ position: relative; }

/* the scroller (gallery) */
.wpw-thumbstrip.wp-block-gallery,
.wpw-thumbstrip .wp-block-gallery{
  display: flex !important;
  flex-wrap: nowrap !important;

  gap: var(--thumb-gap) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;

  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* IMPORTANT: start from left, no centering */
  justify-content: flex-start !important;

  padding: 2px 0 10px !important;
  margin: 0 !important;

  scrollbar-width: none;
}
.wpw-thumbstrip.wp-block-gallery::-webkit-scrollbar,
.wpw-thumbstrip .wp-block-gallery::-webkit-scrollbar{
  display: none;
}

/* each thumb tile = fixed square (size depends on screen) */
.wpw-thumbstrip.wp-block-gallery figure,
.wpw-thumbstrip .wp-block-gallery figure{
  margin: 0 !important;

  width: var(--thumb-size-desktop);
  height: var(--thumb-size-desktop);
  flex: 0 0 var(--thumb-size-desktop);

  scroll-snap-align: start;
}

@media (max-width: 640px){
  .wpw-thumbstrip.wp-block-gallery figure,
  .wpw-thumbstrip .wp-block-gallery figure{
    width: var(--thumb-size-mobile);
    height: var(--thumb-size-mobile);
    flex-basis: var(--thumb-size-mobile);
  }
}

/* images fill the square */
.wpw-thumbstrip img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--thumb-radius);
}

/* arrows */
.wpw-thumbstrip-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: var(--thumb-btn-size);
  height: var(--thumb-btn-size);
  border-radius: 999px;
  border: 0;

  background: var(--thumb-btn-bg);
  color: var(--thumb-btn-fg);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 2;
}

.wpw-thumbstrip-btn--prev{ left: -10px; }
.wpw-thumbstrip-btn--next{ right: -10px; }

/* hide arrow when disabled (start/end) */
.wpw-thumbstrip-btn[disabled]{
  opacity: 0;
  pointer-events: none;