.spotlightsImage {
  max-width: var(--main-container-max);
  margin: 0 auto;
  @include flex-direction(column);
  @include flex-align(center, center);
  gap: 1.6rem;
  @include min(tablet) {
    @include flex-direction(row);
    @include flex-align(stretch, start);
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  @include min(laptop) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  > * {
    border-radius: 1.6rem;
    background: var(--spotlight-template-two-backgorund-image-mode, #fff);
    box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
    width: 100%;
    height: 100%;
    @include flex-direction(column);
    @include min-max(tablet, tablet) {
      min-width: 28rem;
    }
    > img {
      width: 100%;
      height: 26.8rem;
      object-fit: cover;
      border-radius: 1.6rem;
    }
    > p {
      color: var(--spotlight-template-two-text-image-mode, #1B1B1C);
      font-size: 2rem;
      font-style: normal;
      font-weight: 700;
      line-height: 2.8rem;
      text-transform: capitalize;
      padding: 1.6rem;
      @include flex-direction(row);
      @include flex-align(center, space-between);
      >svg{
        min-width: 5.6rem;
        height: 5.6rem;
        background-color: var(--spotlight-template-two-button-color-image-mode, #6E33E5);
        border-radius: 100%;
        padding:2rem;
      }
    }
  }
}