*, *::before, *::after {
  box-sizing: border-box;
}

.slide  {
  min-width: 100%;
  transition: transform 300ms ease-in-out;
}

.slider-btn-left {
  all: unset;
  display: block;
  position: absolute;
  bottom: 0;
  top: 0;
  cursor: pointer;
  transform: scaleX(-1);
  margin-right: -10%;
}

.slider-btn-right {
  display: block;
  position: absolute;
  bottom: 0;
  top: 0;
  cursor: pointer;
  margin-left: -10%;
}

.img-slider-btn:active > * {
  animation: squish 200ms ease-in-out;
}

.img-slider-btn > * {
  color: #03547E;
  width: 2rem;
  height: 2rem;
}

@keyframes squish {
  50% {
    scale: 1.4 0.6;
  }
}

@keyframes spand {
  50% {
    scale: 1.5 1.5;
  }
}

@keyframes contract {
  50% {
    scale: 0.9 0.9;
  }
}

.dotGroup {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
  gap: 0.5rem;
}

.dotInactive {
  width: 16px;
  height: 16px;
  background: #D9D9D9;
  border-radius: 99px;
  animation: contract 200ms ease-in-out;
  transition: scale 100ms ease-in-out;
}

.dotActive {
  width: 16px;
  height: 16px;
  background: #72D6FF;
  border-radius: 99px;
  animation: spand 200ms ease-in-out;
}

 .dotInactive:hover {
  scale: 1.2;
}

@media (max-width: 480px) {
  .slider-btn-left {
    margin-right: -35px;
  }

  .slider-btn-right {
    margin-left: -35px;
  }
}