.album-bg-transition {
  height: clamp(40px, 5vw, 60px);
  position: relative;
  overflow: visible;
}

.album-scatter {
  position: absolute;
  width: clamp(110px, 16vw, 170px);
  height: auto;
  pointer-events: none;
}

.album-scatter--a {
  right: clamp(1rem, 10vw, 12rem);
  top: 50%;
  transform: translateY(-50%) rotate(20deg);
  z-index: 4;
}

.album-scatter--b {
  left: clamp(0.5rem, 6vw, 8rem);
  top: 50%;
  transform: translateY(-55%) rotate(-14deg);
  z-index: 0;
}

@media (max-width: 767px) {
  .album-scatter {
    width: clamp(80px, 22vw, 120px);
  }

  .album-scatter--a {
    transform: translateY(-100%) rotate(20deg);
  }

  .album-scatter--b {
    transform: translateY(120%) rotate(-16deg);
  }
}

.album-section-bg {
  background-color: var(--bg-green);
  position: relative;
}

.album-section-bg::before {
  content: '';
  position: absolute;
  top: calc(-1 * clamp(220px, 28vw, 380px));
  left: 0;
  right: 0;
  height: clamp(220px, 28vw, 380px);
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 109, 107, 0.20) 25%,
      rgba(0, 109, 107, 0.52) 50%,
      rgba(0, 109, 107, 0.82) 70%,
      rgba(0, 109, 107, 0.96) 85%,
      var(--bg-green) 100%);
  pointer-events: none;
  z-index: 1;
}

.album-stripe {
  background-color: var(--bg-yellow);
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  z-index: 2;
}

.album-stripe__track {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  height: clamp(180px, 25vw, 290px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.album-stripe__price {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(300px, 41vw, 480px);
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .album-stripe__track {
    height: clamp(188px, 23vw, 278px);
  }

  .album-stripe__price {
    height: clamp(250px, 31vw, 370px);
  }
}

.album-stripe__minion {
  position: absolute;
  right: clamp(1rem, 8vw, 15rem);
  bottom: -10rem;
  height: clamp(210px, 27vw, 300px);
  width: auto;
  object-fit: contain;
  z-index: 2;
}

footer.album-section-bg::before {
  content: none;
}

@media (max-width: 767px) {
  .album-stripe__minion {
    position: absolute;
    right: clamp(1rem, 4vw, 8rem);
    bottom: -12rem;
    height: clamp(120px, 38vw, 160px);
  }
}

@media (min-width: 1920px) {
  .album-stripe__track {
    max-width: 1700px;
    height: clamp(280px, 22vw, 420px);
  }

  .album-stripe__price {
    height: clamp(450px, 32vw, 640px);
  }

  .album-stripe__minion {
    height: clamp(380px, 24vw, 520px);
    right: 1rem;
    bottom: -16rem;
  }

  .album-section-bg::before {
    top: calc(-1 * clamp(350px, 28vw, 580px));
    height: clamp(350px, 28vw, 580px);
  }

  .album-scatter {
    width: clamp(200px, 14vw, 300px);
  }
}