h1 {
  font-size: 38px;
}
/* For desktop displays */
@media only screen and (width >= 1024px) {
  h1 {
    font-size: 64px;
  }
}
/* For tablet displays and other bigger displays */
@media only screen and (width >= 415px) and (width <= 1023px) {
  h1 {
    font-size: 48px;
  }
}
.sub-grid-content {
  grid-template-columns: 100%;
}
.youtube-video-wrap {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}
/* For mobile displays and any weirdly small displays */
@media only screen and (width <= 1023px) {
  .youtube-video-wrap {
    max-width: 60%;
  }
}
.music-platform-grid {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: 50% 50%;
  height: auto;
  padding-left: 25%;
  padding-right: 25%;
}
/* For tablet displays and other bigger displays */
@media only screen and (width >= 415px) and (width <= 1023px) {
  .music-platform-grid {
    padding-left: 15%;
    padding-right: 15%;
  }
}
/* For mobile displays and any weirdly small displays */
@media only screen and (width <= 414px) {
  .music-platform-grid {
    padding-left: 15%;
    padding-right: 15%;
  }
}
.music-platform-grid div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 5px solid black;
  border-image: url("/assets/images/box.svg") 20 round;
}
.platform-img-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}
/* For anything smaller than a laptop */
@media only screen and (width <= 1023px) {
  .platform-img-div {
    padding-right: 10%;
  }
}
.platform-img-div img {
  align-self: center;
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  height: 80%;
}
/* YouTube Music's wordmark is wider/shorter than the other platform logos,
   so it looks oversized next to them at the default 80% height. */
.platform-icon-compact {
  height: 60%;
}