.roomCarousel {
  width: 100%;
  margin: 0;
  column-gap: 40px;
  row-gap: 10px;
  display: grid; }
  @media (min-width: 768px) {
  .roomCarousel {
    grid-template-columns: repeat(12, minmax(0, 1fr)); } }
  .roomCarousel .flickity-viewport {
    overflow: visible; }
    @media (min-width: 768px) {
  .roomCarousel .flickity-viewport {
    grid-column: 2/span 10; } }
  .roomCarousel .overviewItem {
    position: relative;
    width: 100%;
    scale: 0.3;
    transition: scale 0.8s ease;
    padding: 0;
    aspect-ratio: 1.3333333333;
    overflow: visible; }
    .roomCarousel .overviewItem:hover img {
      scale: 1; }
    .roomCarousel .overviewItem img {
      scale: 1.1; }
    .roomCarousel .overviewItem .image {
      width: 100%;
      height: 100%; }
      .roomCarousel .overviewItem .image picture {
        overflow: hidden;
        display: block; }
        .roomCarousel .overviewItem .image picture img {
          transition: scale 0.3s ease; }
      .roomCarousel .overviewItem .image picture, .roomCarousel .overviewItem .image a {
        width: 100%;
        height: 100%; }
      .roomCarousel .overviewItem .image a {
        position: absolute;
        left: 0;
        top: 0; }
    .roomCarousel .overviewItem .text {
      pointer-events: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.8s ease; }
      .roomCarousel .overviewItem .text .price {
        position: absolute;
        top: 1rem;
        right: 1rem;
        color: white;
        width: 115px;
        height: 140px;
        background-image: url(/typo3conf/ext/zz_gowest_theme_stoiser/Resources/Public/Images/icon.svg);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        line-height: 1.5em; }
        .roomCarousel .overviewItem .text .price span {
          font-weight: 700; }
      .roomCarousel .overviewItem .text .inner {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        color: white !important; }
        @media (min-width: 992px) {
  .roomCarousel .overviewItem .text .inner {
    padding: 60px; } }
        .roomCarousel .overviewItem .text .inner h2 {
          color: white;
          font-size: 22px;
          text-transform: none;
          font-weight: normal; }
          @media (min-width: 992px) {
  .roomCarousel .overviewItem .text .inner h2 {
    font-size: 45px; } }
        .roomCarousel .overviewItem .text .inner header {
          margin-bottom: 0.5rem; }
        .roomCarousel .overviewItem .text .inner .occupancy {
          margin-bottom: 0; }
          .roomCarousel .overviewItem .text .inner .occupancy::before {
            content: "\e927";
            font-family: 'default';
            font-weight: normal;
            text-indent: 0;
            font-style: normal;
            font-size: 14px;
            color: white;
            margin-right: 8px; }
          @media (min-width: 768px) {
  .roomCarousel .overviewItem .text .inner .occupancy {
    margin-bottom: 0.75rem; } }
        .roomCarousel .overviewItem .text .inner .buttons {
          display: none; }
          @media (min-width: 768px) {
  .roomCarousel .overviewItem .text .inner .buttons {
    display: static; } }
        .roomCarousel .overviewItem .text .inner .link {
          text-transform: uppercase;
          color: white;
          text-underline-offset: 0.4em;
          pointer-events: auto;
          transition: opacity 0.3s ease; }
          .roomCarousel .overviewItem .text .inner .link:hover {
            opacity: 0.6; }
    .roomCarousel .overviewItem.is-selected {
      scale: 1; }
      .roomCarousel .overviewItem.is-selected .text {
        opacity: 1; }
      .roomCarousel .overviewItem.is-selected .underneath {
        opacity: 0;
        transition-delay: 0s; }
    .roomCarousel .overviewItem.is-previous .underneath {
      text-align: right;
      right: 0; }
    .roomCarousel .overviewItem.is-next .underneath {
      text-align: left;
      left: 0; }
    .roomCarousel .overviewItem .underneath {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(150%);
      color: #6998af !important;
      transition-delay: 0.3s;
      transition-property: opacity;
      transition-duration: 0.3s;
      font-size: 4rem;
      text-transform: none;
      font-weight: normal; }
  .roomCarousel .controls {
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; }
    .roomCarousel .controls .btn-next, .roomCarousel .controls .btn-prev {
      height: 60px;
      width: 60px;
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: auto; }
      .roomCarousel .controls .btn-next:hover::before, .roomCarousel .controls .btn-prev:hover::before {
        opacity: 0.8; }
    .roomCarousel .controls .btn-next::before {
      content: "\2c3";
      display: block;
      font-family: 'default';
      font-weight: normal;
      text-indent: 0;
      font-style: normal;
      color: white;
      font-size: 30px; }
      @media (min-width: 768px) {
  .roomCarousel .controls .btn-next::before {
    color: #6998af; } }
    .roomCarousel .controls .btn-prev::before {
      content: "\2c2";
      display: block;
      font-family: 'default';
      font-weight: normal;
      text-indent: 0;
      font-style: normal;
      color: white;
      font-size: 30px; }
      @media (min-width: 768px) {
  .roomCarousel .controls .btn-prev::before {
    color: #6998af; } }