.nav__bg-wrapper {
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  will-change: opacity;
  perspective-origin: top center;
  perspective: 2000px;
  transform-origin: top center;
  transform: rotateX(-15deg);
  z-index: 6;
}
.nav__bg-wrapper.is-visible {
  visibility: visible;
  opacity: 1;
  transform: rotateX(0deg);
}
.nav__bg {
  width: 300px;
  height: 200px;
  background: white;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
  transform-origin: left top;
  will-change: transform;
}
.nav__bg.is-animatable {
  transition: 0.2s;
}

.nav__sections {
  display: flex;
  justify-content: center;
}
.nav__section {
  position: relative;
}
.nav__section:hover .nav__label {
  opacity: 0.6;
}
.nav__section:hover .nav__links {
  visibility: visible;
  opacity: 1;
}
.nav__label {
  display: inline-block;
  padding: 1.875em 1.5625em;
  color: white;
  transition: 0.3s;
}
.nav__links {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 1.875em;
  visibility: hidden;
  opacity: 0;
  transition-delay:0.1s;
  transition: 0.1s;
  transition-timing-function:ease-in-out;
  transform-origin: top center;
}

.nav__bg-wrapper .nav__arrow {
  width:15px;
  height:15px;
  margin: auto;
  display: block;
  background:white;
  transform: translateY(-50%) rotate(45deg);
}