body {
  background-color: #e0e8fe;
  background-image: url(images/pattern-background-mobile.svg);
  background-repeat: no-repeat;
}

.container {
  max-width: 327px;
  margin: 71px auto;
  box-shadow: 0px 40px 40px -20px rgba(13, 48, 189, 0.151826);
}

.header {
  background-image: url(images/illustration-hero.svg);
  background-size: cover;
  border-radius: 20px 20px 0 0;
  min-height: 160px;
}

.body {
  background-color: white;
  border-radius: 0 0 20px 20px;
  padding: 32px;
}

.cart {
  background: #f7f9ff;
  border-radius: 11px;
  display: flex;
  padding: 16px;
}

.cart > div:nth-of-type(1) {
  width: 30%;
}
.cart > div:nth-of-type(2) {
  width: 40%;
}

.cart > div:nth-of-type(3) {
  width: 30%;
  align-self: center;
  text-align: right;
}

.cart span:first-of-type {
  font-weight: 900;
  font-size: 14px;

  color: #1f2e55;
}

.cart span:nth-of-type(2) {
  font-weight: 500;
  font-size: 14px;

  color: #717fa6;
}

.cart .icon {
  background-image: url(images/icon-music.svg);
  background-repeat: no-repeat;
}

.buy {
  height: 50px;
  background: #382ae1;
  box-shadow: 0px 20px 20px rgba(56, 42, 225, 0.190291);
  border-radius: 11px;
  font-weight: 900;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  margin-top: 24px;
}
.buy:hover {
  cursor: pointer;
  background: #766cf1;
}

.cancel {
  text-align: center;
  font-weight: 900;
  margin-top: 24px;
  color: #717fa6;
}

.cancel:hover {
  cursor: pointer;
  color: #1f2e55;
}