.cruise-map-timeline-header {
  clear: right;
  margin-bottom: $margin-half;
  padding: $margin-normal $margin-half 0;

  @include breakpoint(sm) {
    margin: 0;
    margin: $margin-normal;
  }
}

.cruise-map-timeline-wrapper {
  @extend %flexbox-column;
  align-items: stretch;
  border-radius: $margin-normal;
  overflow: hidden;
  box-shadow: $box-shadow-card;
  margin-bottom: $margin-normal;

  @include breakpoint(sm) {
    flex-direction: row;
  }

  .cruise-map-container {
    flex-grow: 3;
    flex-basis: 0;
    order: 1;

    @include breakpoint(sm) {
      order: 2;
    }

    .cruise-map {
      height: 100%;
    }
  }
}

.cruise-intro-text {
  padding: 0 $margin-half;
  max-width: 790px + ($margin-quadruple * 2);
  margin-bottom: $margin-double;

  @include breakpoint(sm) {
    padding: 0;
  }
}