.banner
{
  max-width    : 900px;
  height       : auto;
  margin-left  : auto;
  margin-right : auto;
  margin-top   : 1px;
  margin-bottom: 0;
}

.banner img
{
  width  : 100%;
  height : auto;
  display: block;
}

.banner-slider
{
  position    : relative;
  width       : min(90vw, 900px);
  overflow    : hidden;
  background  : #000000;
  margin-left : auto;
  margin-right: auto;
  margin-top  : 1px;
}

.banner-slides
{
  display   : flex;
  transition: transform 0.5s ease-in-out;
}

.banner-slide
{
  min-width      : 100%;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.banner-slide img
{
  display   : block;
  width     : 100%;
  height    : auto;
  max-height: 80vh;
  object-fit: contain;
}

.banner-dots
{
  position     : absolute;
  bottom       : 16px;
  left         : 50%;
  transform    : translateX(-50%);
  display      : flex;
  gap          : 8px;
  padding      : 6px 10px;
  border-radius: 12px;
  background   : rgb(255 255 255 / 0.0);
}

.banner-dot
{
  width        : 10px;
  height       : 10px;
  padding      : 0;
  border       : 0;
  border-radius: 50%;
  background   : #BBBBBB;
  cursor       : pointer;
}

.banner-dot.active
{
  background: #FFFFFF;
}

@media (max-width: 900px)
{
  .banner-dots
  {
    display: none;
  }

  .banner-slider
  {
    width: 100%;
  }

  .banner-slide img
  {
    max-height: 70vh;
  }
}