/*
Typography
*/
/* font family */
/* perfect triangle */
/* type scale ratio */
/* type scale */
/* Vertical Rythm */
/*
xs: 576px,
sm: 768px,
md: 992px,
lg: 1200px
*/
.banner {
  display: flex;
  padding: calc(var(--spacer) * 2) 0;
}
.banner.full-w {
  width: 100%;
  justify-content: center;
}
.banner.full-w > * + * {
  margin-left: var(--spacer);
}

.audio-wrapper {
  display: flex;
  align-items: center;
}
@media (max-width: 63rem) {
  .audio-wrapper {
    flex-direction: column;
    align-items: center;
  }
}
.audio-wrapper a.btn-icon {
  flex-shrink: 0;
}
.audio-wrapper ul.language-tiles {
  height: 40px;
  width: auto;
  overflow: hidden;
  transform-style: preserve-3d;
  display: flex;
  flex: 1;
}
@media (max-width: 63rem) {
  .audio-wrapper ul.language-tiles {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.audio-wrapper ul.language-tiles .language-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  backface-visibility: hidden;
  height: 2.5rem;
  position: absolute;
  transition: transform 0.5s ease-out;
  transform: rotateX(180deg);
}
.audio-wrapper ul.language-tiles .language-tile.active {
  transform: rotateX(0deg);
}
.audio-wrapper ul.language-tiles .language-tile.prev {
  transform: rotateX(-180deg);
}