.details {
  display: flex;
  padding: 8rem 4rem 4rem;

  @include media('>=desktop') {
    padding: 80px 40px 40px;
  }

  @include media('<phone') {
    flex-direction: column;
    padding: 7rem 2rem 4rem;
  }
}

.details__gallery {
  background: var(--color-bison-hide);
  height: 69.5rem;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 50%;

  @include media('<phone') {
    height: 25.7rem;
    width: 100%;
  }
}

.details__gallery__navigation {
  bottom: 2rem;
  display: flex;
  position: absolute;
  right: 2rem;

  @include media('>=desktop') {
    bottom: 20px;
    right: 20px;
  }

  @include media('<phone') {
    bottom: 1rem;
    right: 1rem;
  }
}

.details__gallery__navigation__button {
  font-size: 0;
  height: 3rem;
  opacity: 0.5;
  position: relative;
  transition: opacity 0.4s ease;
  width: 2rem;

  &:after {
    background: var(--color-black);
    border-radius: 50%;
    content: '';
    height: 1rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
  }

  &--active {
    opacity: 1;
  }

  @include media('>=desktop') {
    height: 30px;
    width: 20px;

    &:after {
      height: 10px;
      width: 10px;
    }
  }

  @include media('<phone') {
    height: 4.8rem;
    width: 4.8rem;
  }
}

.details__header__media {
  @extend %cover;

  opacity: 0;
  transition: opacity 0.4s ease;

  &--active {
    opacity: 1;
  }
}

.details__header__media__image {
  @extend %cover;

  object-fit: cover;
}

.details__information {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2.5rem;
  width: 50%;

  @include media('<phone') {
    padding-left: 0;
    padding-top: 5rem;
    width: 100%;
  }
}

.details__information__label {
  @extend %animation-letter-spacing;
  @extend %label-12;

  &--active {
    @extend %animation-letter-spacing--active;
  }
}

.details__information__title {
  font: 4.4rem/1 $font-editorial-new;
  margin-top: 2rem;
  max-width: 37rem;
  overflow: hidden;
  padding-bottom: 0.6rem;
  width: 100%;

  @include media('>=desktop') {
    font-size: 44px;
    max-width: 370px;
  }

  @include media('<phone') {
    font-size: 4rem;
  }
}

.details__information__description {
  margin-top: 1.5rem;
  max-width: 41rem;

  br {
    display: none;
  }

  p {
    &:first-child {
      font-size: 1.2rem;
    }

    &:not(:first-child) {
      margin-top: 3.2rem;
    }
  }

  strong {
    display: inline-block;
    font-family: $font-neue-montreal;
    width: 150px;
  }

  @include media('>=desktop') {
    margin-top: 15px;
    max-width: 410px;

    p {
      &:first-child {
        font-size: 12px;
      }

      &:not(:first-child) {
        margin-top: 32px;
      }
    }
  }

  @include media('<phone') {
    strong {
      width: 11rem;
    }
  }
}

.details__information__description__list {
  margin-top: 4.5rem;
  max-width: 41rem;

  @include media('>=desktop') {
    margin-top: 45px;
    max-width: 410px;
  }

  @include media('<phone') {
    margin-top: 2.2rem;
  }
}

.details__information__description__item {
  align-items: center;
  display: flex;
  font: 1.2rem $font-anonymous;
  overflow: hidden;
  padding: 1.2rem 0;
  position: relative;
  white-space: nowrap;

  &:after {
    @extend %dash;

    content: '';
  }

  div {
    display: flex;
    transform: translateY(2.5rem);
  }

  &--active {
    &:after {
      @extend %dash--active;
    }

    div {
      transform: translateY(0);
      transition: transform 1.5s 0.1s var(--ease-out-expo);
    }
  }

  @include media('>=desktop') {
    font-size: 12px;
    padding: 12px 0;
  }

  @include media('<phone') {
    font-size: 1.1rem;
  }
}

.details__information__button {
  margin-left: auto;
  margin-top: 5rem;
  transform-origin: right;
  width: 21rem;

  &:after {
    height: 21rem;
    width: 21rem;
  }

  @include media('>=desktop') {
    margin-top: 50px;
    width: 210px;

    &:after {
      height: 210px;
      width: 210px;
    }
  }

  @include media('<phone') {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
    transform-origin: center;
  }
}
