.wrapper {
  --rw-width: 23rem;
  /* 7 columns. */
  grid-template-columns: auto 1fr 1fr 4fr 1fr 1fr auto;
  /* 4 rows. */
  grid-template-rows: minmax(min-content, max-content) minmax(3rem, max-content) minmax(3rem, max-content) minmax(min-content, max-content) minmax(1rem, auto);
}

#heading {
  grid-column: 1 / span 7;
}

#messageWrapper {
  position: absolute;
  background-color: var(--color-primary-light);
  padding: 0;
  display: flex;
  z-index: 2;
}

#message {
  font-size: 1.2rem;
}

#tabWrapper {
  width: 100%;
  max-width: calc(var(--rw-width) * 3);

  padding: 0;
  padding-top: 1rem;
  margin-bottom: 2rem;

  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tab {
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: bold;
  padding: 0.5rem;

  border-top-style: solid;
  border-top-color: var(--color-emphasis-border);
  border-top-width: 0.12rem;
}

.tab.off {
  opacity: 0.5;
  background-color: var(--color-primary-fill);

  cursor: pointer;

  border-top-style: none;

  border-bottom-style: solid;
  border-bottom-color: var(--color-emphasis-border);
  border-bottom-width: 0.12rem;
}

#tabRhythms.off {
  border-right-style: solid;
  border-right-color: var(--color-emphasis-border);
  border-right-width: 0.12rem;
}

#tabInstruments.off {
  border-left-style: solid;
  border-left-color: var(--color-emphasis-border);
  border-left-width: 0.12rem;
}

.instrumentWrapper {
  margin-bottom: 2rem;

  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: minmax(min-content, max-content) auto;
}

.leftWrapper {
  margin-right: 1rem;
}

.instrumentName {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.instrumentDescr {
  margin-bottom: 0.4rem;
}

.instrumentLink {
  font-size: 0.8rem;
  opacity: 0.8;
}

img.instrumentIcon {
  padding: 1rem;
  padding-bottom: 0.3rem;

  opacity: 0.6;
}

@media screen and (min-width: 0) and (max-width: 640px) {
  .wrapper {
    --rw-width: 19rem;
  }
}

@media screen and (min-width: 0) and (max-width: 400px) {
  img.instrumentIcon {
    min-width: 2.8rem;
    max-width: 2.8rem;
  }
}

@media screen and (min-width: 401px) and (max-width: 640px) {
  img.instrumentIcon {
    min-width: 3.4rem;
    max-width: 3.4rem;
  }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
  img.instrumentIcon {
    min-width: 4rem;
    max-width: 4rem;
  }
}

@media screen and (min-width: 1024px) {
  img.instrumentIcon {
    min-width: 5rem;
    max-width: 5rem;
  }
}

div.onTooMessy {
  background-color: var(--color-primary-fill);
  box-shadow: 0 0 0.5rem 0.5rem var(--color-emphasis-fill);
}

div.on > img.instrumentIcon {
  opacity: 1;
}

.instrumentButton {
  width: 100%;
  height: 3rem;
}

#instrumentsWrapper {
  max-width: 50rem;
}

#rhythmsWrapper {
  max-width: calc(var(--rw-width) * 3);

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#rhythmsWrapper.retracted {
  display: none;
}

.rhythmWrapper {
  flex: 1;
  width: var(--rw-width);
  min-width: var(--rw-width);
  max-width: var(--rw-width);

  margin-bottom: 2rem;

  margin-right: auto;
  margin-left: auto;

  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: minmax(min-content, max-content) auto;
}

.roll {
  border-left-width: 0.12rem;
  border-left-style: solid;
  border-left-color: var(--color-emphasis-border);
  border-right-width: 0.12rem;
  border-right-style: solid;
  border-right-color: var(--color-emphasis-border);

  background-color: var(--color-primary-fill);

  margin-top: 1rem;
  height: 1rem;
  width: 100%;
}

.sound {
  height: 0.5rem;
  opacity: 0.75;
  background: var(--color-primary-text);
  box-shadow: inset -0.12rem 0 var(--color-primary-fill);
}

.playButton {
  width: 60%;
  height: 3rem;
}

.detailsWrapper {
  margin-bottom: 2rem;
}

.wordsWrapper {
  margin-top: 0.5rem;

  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: minmax(min-content, max-content) auto;
}

.explorerWords {
  font-size: 1rem;
  font-weight: bold;
}

@media screen and (min-width: 0) and (max-width: 400px) {
  img.explorerRhythmImg {
    --width: 2.4rem;
    min-width: 2.4rem;
    max-width: 2.4rem;
  }
}

@media screen and (min-width: 401px) and (max-width: 640px) {
  img.explorerRhythmImg {
    --width: 3.2rem;
    min-width: 3.2rem;
    max-width: 3.2rem;
  }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
  img.explorerRhythmImg {
    --width: 3.6rem;
    min-width: 3.6rem;
    max-width: 3.6rem;
  }
}

@media screen and (min-width: 1024px) {
  img.explorerRhythmImg {
    --width: 4rem;
    min-width: 4rem;
    max-width: 4rem;
  }
}

img.explorerRhythmImg {
  opacity: var(--rhythm-img-opacity);
  pointer-events: none;
  padding-right: 2rem;
  padding-left: 2rem;
}

img.explorerRhythmImg.halfBeat {
  min-width: calc(var(--width) * 0.5);
  max-width: calc(var(--width) * 0.5);
  padding-right: calc(2rem + var(--width) * 0.25);
  padding-left: calc(2rem + var(--width) * 0.25);
}

.button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 1rem;
}
