//carousel-with-preview
.frame-type-carousel_with_preview_component {
  .content-attraction.c-carousel-with-preview-component.component {
    margin-left: 25px;
    margin-right: 5px;

    @include media-breakpoint-down(xl) {
      margin-inline: 25px;
    }

    @media (min-width: 1300px) {
      margin-left: 25px;
      margin-right: 25px;
    }

    @media (min-resolution: 120dpi) and (max-resolution: 150dpi) {
      margin: 0px;
    }

    .hero-banner-holder {
      background: inherit
    }

    div {
      .hero-banner-container {
        background: inherit;

        .hero-image {
          &.has-media {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            overflow: hidden;

            iframe,
            picture {
              width: 100% !important;
              height: 100% !important;
              position: absolute;
              top: 0;
              left: 0;
              border: none;
            }

            video {
              width: 100% !important;
              height: 100% !important;
              position: absolute;
              border: none;
            }
          }
        }
      }
    }

    .card-carousel-component-holder {
      @include media-breakpoint-down(md) {
        bottom: -90px;
      }

      .card-frame-title {
        background-color: $white;
        color: $black !important;
        font-size: 16px;
      }

      .card-frame-image.has-image {
        padding: 20px;
        height: auto !important;

        img {
          width: auto;
          height: auto;
        }
      }
    }

    .hero-detail-container {
      top: 50%;

      @include media-breakpoint-down(xl) {
        top: 0px;
      }

      &.w--content {
        display: block;

        .contents {
          width: 60%;
          margin: 0 auto;

          @include media-breakpoint-down(xl) {
            width: 100%;
          }

          .title {
            h2.hero-banner-title {
              color: $white;
              font-family: $font-family-primary;
              text-align: center;

              @include media-breakpoint-down(md) {
                font-size: 1.618rem !important;
              }
            }
          }

          .content {
            color: $white;

            @include media-breakpoint-down(md) {
              font-size: 10px;
            }
          }
        }

        .custom-button {
          a {
            display: inline-block;
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            border: 1px solid $background-transparent;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            background-color: $red-dark;
            color: $white;
            margin-top: 0px;

            &:hover {
              background: $secondary-color !important;
              color: $white;
            }
          }

          &.mob-hide {
            display: block;

            @include media-breakpoint-down(md) {
              display: none;
            }
          }
        }

        @include media-breakpoint-down(md) {
          display: none;
        }
      }
    }

    .c-card-component-container {
      .card-frame {
        border-radius: 4px !important;

        .card-frame-title.frame-wrapper {
          font-family: $font-family-primary;
        }
      }

      .custom-button {
        a {
          display: inline-block;
          padding: 10px 20px;
          font-size: 1rem;
          font-weight: bold;
          text-align: center;
          text-decoration: none;
          border: 1px solid $background-transparent;
          border-radius: 20px;
          cursor: pointer;
          transition: background-color 0.3s ease;
          background-color: $red-dark;
          color: $white;
          margin-top: 20px;

          &:hover {
            background: $secondary-color !important;
            color: $white;
          }
        }

        &.desk-hide {
          display: none;

          @include media-breakpoint-down(md) {
            display: block;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translate(0%, 50%);
            z-index: 1;
            display: inline-block;
            vertical-align: top;
            text-align: center;
          }
        }
      }
    }

    .card-frame-title.frame-wrapper {
      display: block !important;
    }

    .card-carsl-item {
      &::before {
        background: $background-transparent !important;
      }
    }

    .card-carousel-component-container {
      .card-carsl-item-list {
        .slick-dots.custom_paging {
          li.slick-active {
            padding: 20px 0;
            bottom: 40px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}