:root {
  --travel-slider-height: 300px;
  --travel-slider-city-image-size: 120px;
  --travel-slider-vertical-padding: 64px;
}

.travel-slider {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}
.travel-slider .swiper {
  height: var(--travel-slider-height);
  padding-top: var(--travel-slider-vertical-padding);
  padding-bottom: var(--travel-slider-vertical-padding);
}
.travel-slider .swiper-slide {
  width: 80%;
  max-width: 640px;
  box-sizing: border-box;
  position: relative;
}
.travel-slider-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5), 0px -1px 0px rgba(255, 255, 255, 0.5);
}
.travel-slider-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  line-height: 1.25;
  border-radius: 0 0 16px 16px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.travel-slider-title {
  font-weight: bold;
  font-size: 32px;
}
.travel-slider-subtitle {
  font-size: 18px;
}
.travel-slider-planet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}
.travel-slider-planet > img {
  display: block;
  width: auto;
  height: 100%;
  margin: 0 auto;
}
.travel-slider-cities img {
  --travel-slider-planet-size: calc(
    var(--travel-slider-height) + var(--travel-slider-vertical-padding) * 2
  );
  --travel-slider-image-rotate: 0deg;
  --travel-slider-image-scale: 1;
  position: absolute;
  bottom: 95%;
  left: 50%;
  transform: translateX(-50%) scale(var(--travel-slider-image-scale)) rotate(var(--travel-slider-image-rotate));
  transform-origin: center calc(var(--travel-slider-planet-size) / 2 * 0.95 * 0.95 + var(--travel-slider-city-image-size) * 1);
  height: var(--travel-slider-city-image-size);
  width: var(--travel-slider-city-image-size);
  object-position: center bottom;
  object-fit: contain;
}
.travel-slider-cities-8 img:nth-child(2) {
  --travel-slider-image-rotate: 45deg;
}
.travel-slider-cities-8 img:nth-child(3) {
  --travel-slider-image-rotate: 90deg;
}
.travel-slider-cities-8 img:nth-child(4) {
  --travel-slider-image-rotate: 135deg;
}
.travel-slider-cities-8 img:nth-child(5) {
  --travel-slider-image-rotate: 180deg;
}
.travel-slider-cities-8 img:nth-child(6) {
  --travel-slider-image-rotate: 225deg;
}
.travel-slider-cities-8 img:nth-child(7) {
  --travel-slider-image-rotate: 270deg;
}
.travel-slider-cities-8 img:nth-child(8) {
  --travel-slider-image-rotate: 315deg;
}
.travel-slider-cities-4 img:nth-child(2) {
  --travel-slider-image-rotate: 90deg;
}
.travel-slider-cities-4 img:nth-child(3) {
  --travel-slider-image-rotate: 180deg;
}
.travel-slider-cities-4 img:nth-child(4) {
  --travel-slider-image-rotate: 270deg;
}