.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(start, start);
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  @include min(laptop) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: hidden;
  }
  > * {
    border-radius: 1.6rem;
    background: var(--spotlight-template-one-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%;
    padding: 2.4rem;
    gap: 1.6rem;
    height: 100%;
    @include flex-direction(column);
    @include min-max(tablet, tablet) {
      min-width: 28.8rem;
    }
    > img {
      width: 100%;
      height: 26rem;
      object-fit: cover;
      border-radius: 1.6rem;
    }
    > p {
      color: var(--spotlight-template-one-text-image-mode, #1b1b1c);
      text-align: center;
      font-size: 2.4rem;
      font-style: normal;
      font-weight: 700;
      line-height: 3.2rem;
      text-transform: capitalize;
      padding: 0 5rem;
    }
  }
}