.all-musement-link {
  margin-top: $margin-double;
  display: inline-block;

  a {
    display: flex;
    justify-content: center;
    padding: $margin-half $margin-normal;
    font-weight: bold;
    background-color: $color-white;
    border-radius: $margin-half;

    svg {
      margin-left: $margin-half;
    }
  }
}

.content-card {
  @extend %nicer-card-grid;
  @extend %one-column-wide;

  @media (max-width: $screen-xs-max) {
    flex-flow: column nowrap;

    &:nth-child(2n + 1):nth-last-child(1) {
      flex-flow: column nowrap;

      .media-container {
        margin: 0;
        width: 100%;
      }

      .card-text {
        width: 100%;
        border-top: 0;
      }

      .offer-icon {
        right: 0;
      }
    }
  }

  &.musement {
    .card-text {
      padding: $margin-normal;
    }

    h3 {
      font-size: 1.9rem;
    }

    p {
      font-size: 1.6rem;
      flex: 1;
    }

    .info-block {
      display: flex;
      flex-direction: column;
    }

    .card-price-wrapper {
      align-self: flex-end;
    }

    .card-price-child,
    .card-price-adult {
      display: flex;
      justify-content: flex-end;
    }

    .card-price-amount {
      font-weight: bold;
    }

    .card-price-desc {
      font-style: italic;
      margin-right: $margin-half;
    }
  }

  > .content-card-vue-wrapper {
    display: inherit;
    flex-flow: inherit;
    width: 100%;
    flex-grow: 1;
  }

  .tui-concept-logo,
  .concept-logo,
  .label-icon {
    position: absolute;
    z-index: 11;
    border-top-left-radius: $border-radius-normal;
    overflow: hidden;
  }

  .video {
    margin: 0;
    position: relative;
    color: $color-white;

    .cux-button-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      z-index: 20;

      .button-svg {
        margin: 0;
        background-color: rgba($color-black, .15);
        box-shadow: 2px 2px 5px rgba($color-black, .15);
        z-index: 2;
        overflow: hidden;
      }
    }

    &:hover {
      .cux-button-icon {
        /* stylelint-disable max-nesting-depth */
        .button-svg {
          background-color: rgba($color-black, .3);
        }
        /* stylelint-enable */
      }
    }

    .video-container {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      border: 0;

      iframe {
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }

  .tui-icon-info {
    padding: 0;
  }

  &.full-width {
    @include breakpoint(xs) {
      width: 100%;

      .body-text {
        max-height: none;
        -webkit-line-clamp: initial;

        /* autoprefixer: ignore next */
        -webkit-box-orient: initial;
        overflow: visible;
        text-overflow: initial;
      }
    }
  }
}