@import "variables";
@import "mixins";

section.promotions {
  .vbo-promotions-container {
    .vbo-promotion-details {
      .vbo-promotion-det-wrapper {
        display: block;
        float: none;
        width: auto;
        h4 {
          margin-bottom: $space-xs;
          color: $col-sec;
          font-size: $fs-h3;
        }
      }
      .vbo-promotion-wrapper {
        display: block;
        float: none;
        width: 100%;
        margin-bottom: $space-lg;
        .vbo-promotion-dates {
          background: transparent;
          margin-bottom: $space-xs;
          .vbo-promotion-dates-left {
            background-color: $white;
            border-radius: $border-radius;
            padding: 0;
            .vbo-promotion-date-from,
            .vbo-promotion-date-to {
              padding: 12px 3.2rem;
              span {
                display: inline-block;
                text-transform: none;
                font-size: $fs-p;
                padding: 0;
                &:first-child {
                  margin-right: 1rem;
                }
              }
            }
          }
          .vbo-promotion-dates-right {
            border-radius: $border-radius;
            padding: 12px 3.2rem;
            background-color: #d2d4bc;
            display: flex;
            max-width: none;
            margin: 0;
            i {
              color: $col-sec;
              margin: 0 1.6rem 0 0;
            }
            .vbo-promotion-date-validuntil {
              display: flex;
              align-items: center;
              padding: 0;
              span {
                display: inline-block;
                text-transform: none;
                font-size: $fs-p;
                color: $col-sec;
                &:first-child {
                  margin-right: 1rem;
                }
              }
            }
            @include bp("lg") {
              width: auto;
            }
            @include bp("sm") {
              float: left;
              margin-top: 1rem;
            }
          }
        }
        .vbo-promotion-bottom-block {
          border: none;
          padding: 0px;
          .vbo-promotion-rooms-list {
            text-align: left;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            grid-column-gap: 3rem;
            grid-row-gap: 3rem;
            @include bp("xl") {
              grid-template-columns: repeat(2, 1fr);
            }
            @include bp("md") {
              grid-template-columns: repeat(1, 1fr);
            }
            .vbo-promotion-room-block {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              width: 100%;
              margin: 0;
              border: none;
              background-color: $white;
              border-radius: $border-radius;
              box-shadow: 0px 0px 0px 0px rgba(40, 48, 24, 0.1), 0px 9px 20px 0px rgba(40, 48, 24, 0.1), 0px 36px 36px 0px rgba(40, 48, 24, 0.09), 0px 80px 48px 0px rgba(40, 48, 24, 0.05),
                0px 142px 57px 0px rgba(40, 48, 24, 0.01), 0px 223px 62px 0px rgba(40, 48, 24, 0);
              .vbo-promotion-room-img {
                img {
                  border-radius: $border-radius $border-radius 0 0;
                }
              }
              .vbo-promotion-room-name {
                font-size: $fs-h3;
                font-family: $font-family-headings;
                color: $col-sec;
                margin: 0 $space-xs $space-xxs;
              }
              .vbo-promotion-room-book-block {
                padding: 0 $space-xs $space-xxs;
                a {
                  width: 100%;
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
