
#play-hero-upper {
  display: none;
  width: calc(100% - 6rem);
}

.play-hero {
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 0.8rem;
  justify-items: center;
}

.play-hero__title{
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1rem;
  white-space: nowrap;
  gap: 0.55rem;
  overflow: visible;
}

#play-hero-upper .play-hero__title {
  max-width: 100%;
}

.play-hero__tile{
  flex: 0 0 auto;
  width: 4.4rem;
}

.play-hero__tile .ld-letter{
  font-size: 4rem;
}

.ld-hero img {
  display: none;
}

.play-hero__tile:nth-child(1) {
  transform: rotate(-3deg);
}

.play-hero__tile:nth-child(2) {
  transform: rotate(2deg);
}

.play-hero__tile:nth-child(3) {
  transform: rotate(-4deg);
}

.play-hero__tile:nth-child(4) {
  transform: rotate(3deg);
}

.play-hero__tile:nth-child(5) {
  transform: rotate(-2deg);
}

.play-hero__tile:nth-child(6) {
  transform: rotate(4deg);
}

.play-hero__tile:nth-child(7) {
  transform: rotate(-3deg);
}

.play-hero__tile:nth-child(8) {
  transform: rotate(2deg);
}

.play-hero__tile:nth-child(9) {
  transform: rotate(-4deg);
}

.play-hero__tile:nth-child(10) {
  transform: rotate(3deg);
}

@media (max-width: 62.5rem) {
  .ld-header {
    align-items: normal;
  }
  #play-hero-upper {
    display: block;
  }
  #play-hero-lower {
    display: none;
  }
  .play-hero {
    transform: scale(.9);
    margin-top: .5rem;
  }
  .ld-inside-hero {
    max-width: 52.375rem;
    margin: 6rem auto 0 auto;
  }
  .ld-hamburger {
    margin-left: 0;
  }
}

@media (max-width: 59.375rem) {
  .play-hero {
    transform: scale(.85);
    margin-top: .44rem;
  }
  .ld-inside-hero {
    max-width: 49.25rem;
    margin-top: 5.8rem;
  }
}

@media (max-width: 56.25rem) {
  .play-hero {
    transform: scale(.8);
    margin-top: .38rem;
  }
  .ld-inside-hero {
    max-width: 46.125rem;
    margin-top: 5.6rem;
  }
}

@media (max-width: 53.125rem) {
  .play-hero {
    transform: scale(.75);
    margin-top: .32rem;
  }
  .ld-inside-hero {
    max-width: 43rem;
    margin-top: 5.4rem;
  }
}

@media (max-width: 50rem) {
  .play-hero {
    transform: scale(.7);
    margin-top: .26rem;
  }
  .ld-inside-hero {
    max-width: 39.875rem;
    margin-top: 5.2rem;
  }
}

@media (max-width: 46.875rem) {
  .play-hero {
    transform: scale(.65);
    margin-top: .20rem;
  }
  .ld-inside-hero {
    max-width: 38rem;
    margin-top: 5rem;
  }
}

@media (max-width: 43.75rem) {
  .play-hero {
    transform: scale(.6);
    margin-top: .14rem;
  }
  .ld-inside-hero {
    margin: 0 1rem;
    margin-top: 4.8rem;
  }
}

@media (max-width: 40.625rem) {
  .play-hero {
    transform: scale(.55);
    margin-top: .08rem;
  }
  .ld-inside-hero {
    margin-top: 4.6rem;
  }
}

@media (max-width: 37.5rem) {
  .play-hero {
    transform: scale(.5);
    margin-top: .02rem;;
  }
  .ld-inside-hero {
    margin-top: 4.4rem;
  }
}

@media (max-width: 34.375rem) {
  .play-hero {
    transform: scale(.46);
    margin-top: -.5rem;
  }
  .play-hero__tile:nth-child(10) {
    margin-right: 1.8rem;
  }
  .ld-inside-hero {
    margin-top: 3.7rem;
  }
}

@media (max-width: 31.25rem) {
  .play-hero {
    transform: scale(.41);
    margin-top: -.6rem;
  }
  .play-hero__tile:nth-child(10) {
    margin-right: 1.8rem;
  }
  .ld-inside-hero {
    margin: 0 .5rem;
    margin-top: 3.3rem;
  }
}

@media (max-width: 28.125rem) {
  .play-hero {
    transform: scale(.36);
    margin-top: -.6rem;
  }
  .play-hero__tile:nth-child(10) {
    margin-right: 2.2rem;
  }
  .ld-inside-hero {
  }
}

@media (max-width: 25rem) {
  .play-hero {
    transform: scale(.3);
  }
  .ld-inside-hero {
  }
}

@media (max-width: 21.875rem) {
  .play-hero {
    transform: scale(.25);
  }
  .ld-inside-hero {
  }
}

@media (max-width: 18.75rem) {
  .play-hero {
    transform: scale(.2);
  }
  .ld-inside-hero {
  }
}