:root {
  --color-black: hsla(0, 0%, 12%, 100%);
  --color-white: hsla(0, 0%, 100%, 100%);
  --color-white-50: hsla(0, 0%, 50%, 100%);
  --color-purple: hsla(278, 100%, 75%, 100%);
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
}

.heading__text {
  top: 100px;
  font-size: 8vw;
  font-weight: 700;
  left: 50%;
  letter-spacing: -6px;
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
  position: absolute;
}

.circular-carousel {
  --circular-size: 200vh;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.circular-carousel__list {
  width: var(--circular-size);
  height: var(--circular-size);
  position: absolute;
  bottom: calc(-200vh + 400px);
}

.circular-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.circular-carousel__item img {
  width: 360px;
  height: 420px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}

.instruction {
  position: absolute;
  bottom: calc(800px);
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 24px;
  opacity: 0.9;
}