@import "../styles/variables";

$control-dots-height: 36px;
$carousel-width: 450px;
$carousel-height: 316px;

.main {
  padding-bottom: $control-dots-height;
  :global {
    .carousel{
      display: flex;
    }
    .carousel-slider {
      overflow: unset;
    }
    .slider-wrapper {
      width: $carousel-width;
    }
    .slide {
      display: flex;
      justify-content: center;
      width: $carousel-width;
      height: $carousel-height;
      border-radius: 5px;
      iframe {
        width: 100%;
        margin: unset;
      }
    }
    .control-dots {
      bottom: -$control-dots-height;
      .dot {
        opacity: unset;
        background-color: $clickable-item;
        box-shadow: unset;
        &.selected {
          background-color: $text-on-light;
        }
      }
    }
  }
}

.arrow {
  padding: 0;
  font-size: 11px;
  color: $clickable-item;
  cursor: pointer;
  .arrowIcon {
    width: 20px;
  }
}