.bp-body__gallery {
  .swiper-container {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-wrapper {
    .swiper-slide {
      width: 100%;
      padding-bottom: 75%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      height: auto;
    }
  }
}

.bp-gallery-top {
  width: 100%;
  max-height: 577px;

  .bp-swiper-slide_youtube {
    height: 0;

    iframe {
      width: 100%;
      top: 50%;
      position: absolute;
      transform: translateY(-50%);
      height: 100%;
    }
  }

  .swiper-button-prev.swiper-button-white,
  .swiper-container-rtl .swiper-button-next.swiper-button-white,
  .swiper-button-next.swiper-button-white,
  .swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: none;
  }
}

.bp-body__gallery {
  .bp-gallery-thumbs {
    max-height: 143px;
    box-sizing: border-box;
    padding: 10px 0;

    .swiper-slide {
      opacity: 0.4;
      cursor: pointer;
      width: 100%;
      padding-bottom: 16%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .swiper-slide-thumb-active {
      opacity: 1;
    }

    .bp-swiper-slide_youtube {
      position: relative;
      padding-bottom: 16%;

      &::before {
        content: "";
        display: inline-block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48' width='100%25'%3E%3Cpath class='ytp-large-play-button-bg' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
        width: 45px;
        height: 35px;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .bp-gallery-thumbs-grid {
    box-sizing: border-box;
    padding: 10px 0;
    flex-basis: 100%;

    &.gallery-thumbs-grid_sb {
      .swiper-wrapper {
        justify-content: space-between;
      }
    }

    .swiper-wrapper {
      display: flex;
      gap: 0.2rem;
      flex-wrap: wrap;
      justify-content: flex-start;

      .swiper-slide {
        padding-bottom: 18.25%;
        width: 19%;
        display: block;
        height: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
    }
  }
}
