.moving-ribbon {
  font-size: 15px;
  display: flex;
  overflow: hidden;
  user-select: none;
  background-color: #ffde16;
}
.moving-ribbon ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #db1e35;
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-100%));
  }
}

#july-hero {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../../../images/25/july/hero/back.jpg);
  background-image: -webkit-image-set(
    url("../../../images/25/july/hero/back.jpg") 1x,
    url("../../../images/25/july/hero/back@2x.jpg") 2x
  );
  --yellow: #ffde16;
  height: 32vw;
}
#july-hero .july-container {
  width: 100%;
}
#july-hero .headline {
  width: 51vw;
  margin-top: 3vw;
  left: 2vw;
  position: relative;
}
#july-hero .main {
  width: 29vw;
  margin-top: 1vw;
}
#july-hero .button {
  font-size: 1vw;
  height: 2vw;
  width: 11vw;
  border-radius: 20px;
  margin-top: 26px;
  line-height: 1;
}

@media screen and (max-width: 567px) {
  #july-hero {
    background-image: url(../../../images/25/july/hero/back-m.jpg);
    background-image: -webkit-image-set(
      url("../../../images/25/july/hero/back-m.jpg") 1x,
      url("../../../images/25/july/hero/back-m@2x.jpg") 2x
    );
    height: 161vw;
  }
  .moving-ribbon {
    font-size: 13px;
  }
  #july-hero .jh-animation {
    width: 105%;
    margin-top: 17%;
  }
  #july-hero .headline {
  width: 100%;
  }
  #july-hero .main {
  width: 95%;
  }
  #july-hero .button {
    width: 39vw;
    height: 9vw;
    font-size: 5vw;
    padding-top: 1vw;
  }
}