.room-information:not(:first-of-type) {
  margin-top: $margin-normal;
}

.room-information {
  background: $color-white;

  .accordion-item {
    border-color: $color-blue-100;
    background: $color-blue-100;
  }

  h4 {
    @extend %flexbox-row;

    &.trigger {
      padding: $margin-normal;
      color: $color-link-blue;

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

  .main-facilities {
    flex-grow: 1;
  }

  .additional-facilities {
    margin: 0 0 $margin-normal;
    flex-grow: 1;
    color: $color-blue-500;
    padding: 0;

    li:before {
      color: $color-link-blue;
    }
  }

  .additional-information {
    @extend %flexbox-column;
    padding: 0;

    li {
      @extend %flexbox-row;
      align-items: flex-start;
      margin-bottom: $margin-normal;

      span:first-letter {
        text-transform: uppercase;
      }
    }

    .pictogram {
      margin-right: $margin-normal;
    }
  }

  .tui-text-expander-content {
    padding: 0 $margin-double 0 $margin-normal;

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

  .tui-icon-item {
    h4 {
      margin: 0;
    }
  }
}

.room-information-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;

  @include breakpoint(md) {
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
  }

  header {
    order: 1;

    .room-facts {
      order: 3;
    }

    @include breakpoint(md) {
      width: 100%;
      margin-right: $margin-quadruple;
    }

    .tui-icon-item {
      padding-bottom: $margin-double;
    }

    .preamble {
      margin-bottom: $margin-double;
    }

    .room-remark {
      @extend %flexbox-row;
      justify-items: center;

      .remark-icon {
        margin-right: $margin-normal;
      }
    }
  }

  [class^=ratio-],
  .main-carousel {
    width: 100%;
    order: 2;

    @include breakpoint(md) {
      width: calc(50% - #{$margin-double});
      order: 3;
      margin: $margin-normal 0 $margin-normal $margin-quadruple;
    }
  }

  @include breakpoint(md) {
    .flickity-slider [class^=ratio] {
      width: 100%;
      order: 3;
      margin: 0;
    }
  }
}

.concept-room-types {
  .list-header {
    padding: $margin-normal $margin-enterprise;
    border-bottom: 1px solid $color-beige-300;
    margin: 0;
    width: auto;

    h4 {
      @extend %flexbox-row;
      align-items: center;
    }

    .pictogram {
      margin-right: $margin-normal;
    }
  }
}

.room-facts {
  @include breakpoint(md) {
    width: calc(#{percentage(1 / 2)} - #{$margin-double});
    order: 2;
    margin: $margin-normal 0;

    &:nth-last-child(1) {
      width: 100%;
      columns: 4;
    }
  }

  li {
    background: $color-beige-100;
  }
}