.logo_with_genres {
  width: 100%;
  margin-block: 2rem;

  font-size: 1.7em;
  font-weight: bold;

  display: grid;
  grid-auto-columns: 1fr;
  gap: 1em;
  grid-template-areas:
    ". pop . abba ."
    "rock logo logo logo musical"
    ". german . beatles .";
}

@media screen and (max-width: 599px) {
  .logo_with_genres {
    font-size: 1.4em;
    grid-template-areas:
    ". pop rock abba ."
    ". logo logo logo. "
    ". german musical beatles .";
  }
}

.logo_with_genres > * {
  justify-self: center;
  align-self: center;
  text-align: center;
}

.logo_with_genres .logo {
  grid-area: logo;
}

.logo_with_genres .logo img {
  width: 100%;
  max-height: 8em;
}

.logo_with_genres .pop {
  grid-area: pop;
}

.logo_with_genres .abba {
  grid-area: abba;
}

.logo_with_genres .rock {
  grid-area: rock;
}

.logo_with_genres .musical {
  grid-area: musical;
}

.logo_with_genres .german {
  grid-area: german;
}

.logo_with_genres .beatles {
  grid-area: beatles;
}