/* CSS for multi workspace hotspot section - The section is also using single workspace hotspot CSS - HT */

.f-workspace-hotspot {
  .panel {
    padding-inline: 0 ;
    padding-block-start: 3rem;
  }

  carousel-slider {
    width: 100%;
  }

  .text__heading {
    margin-bottom: 0.2rem;
  }

  .text__subheading {
    margin-bottom: 1.4rem;
  }

  .btn__shop {
    font-size: var(--h6-font-size);
    text-transform: none;
    border-radius: 47px;
    padding: 0.6rem 6rem;
  }

  .disclosure__hero-thumbnail {
    flex-direction: column-reverse;
  }
  
  .slideshow-pagination {
    width: 92%;
  }

  .card__thumbnail {
    pointer-events: none;
    filter: saturate(0);
    height: 100%;
  }

  .card__info {
    padding-top: calc(3 * var(--space-unit));
  }

  .current, .slider__item:hover {
    .card__thumbnail {
      filter: saturate(1);
    }
  }

  .card__title {
    color: var(--text-gray-color);
    .current & {
      color: rgb(var(--link-color));
    }
  }

  .card__media {
    border-bottom: 5px solid var(--scrollbar-color);
    margin-top: -2rem;
    .current & {
      border-bottom: 5px solid rgb(var(--link-color));
    }
  }

  .img-thumb {
    width: 92%;
  }

  .os-scrollbar-horizontal {
    display: none;
  }



  @media (min-width: 769px) {
    .panel {
      padding-block: 6rem;
    }

    .text_subheading {
      font-size: var(--large-text);
    }


  }
}