.menu-wrapper {
  padding: calc(var(--vertical-padding) * 0.5) calc(var(--horizontal-padding) * 0.5);
  background-color: var(--background);
  z-index: 101;
}

.menu {
  padding-bottom: var(--line-height);
}

.menu .menu-item {
  color: var(--secondary);
  background: var(--background);
  padding-right: var(--half-line-height);
}

.menu .row.active .menu-item {
  padding-left: var(--half-line-height);
}

.menu .row {
  height: var(--line-height);
}

.menu .line {
  height: var(--half-line-height);
  margin-bottom: var(--half-line-height);
  border-bottom: var(--line-width) solid var(--secondary);
}

.gallery .gallery-controls {
  margin-bottom: inherit;
}

.gallery .controls {
  font-size: 0.5rem;
}

.gallery .outer-wrapper {
  flex-grow: 1;
}

.gallery .inner-wrapper {
  padding-bottom: 75%;
}

.gallery .caption,
.live .caption {
  font-size: 0.5rem;
}

.live .wrapper {
  padding-bottom: 75%;
  background-color: #000;
}

.live .hud {
  display: none;
}

@media (min-width:768px) {
  .menu-wrapper {
    padding: var(--vertical-padding) var(--horizontal-padding);
  }

  .live .hud {
    display: block;
    padding: 0.2rem 0.4rem;
    font-size: 0.6666666666rem;
  }
}

@media (min-width:1024px) {
  .gallery .gallery-controls {
    margin-bottom: 0.6666666666rem;
  }

  .live .wrapper {
    margin-bottom: 0.6666666666rem;
  }

  .gallery .controls {
    font-size: 0.6666666666rem;
  }

  .gallery .caption,
  .live .caption {
    font-size: 0.6666666666rem;
  }

  .live .hud {
    font-size: 0.666rem;
  }
}