grid-template-columns auto fit not working as expected

.videos__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  place-content: center;
  place-items: center;
  margin-top: 2rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  gap: 1.5rem;

  &-item {
    padding: 0.5rem;
  }

  video {
    height: 250px;
  }
}

      <div className='videos-page__container'>
        <div className='videos__list'>
          <div className='videos__list-item'>
            <div className='videos__list-item-image-wrapper'>
  
              <video src='/assets/videos/1-video.mp4' muted />
            </div>
            <p>We make the weddings beautiful together</p>
          </div>
          <div className='videos__list-item'>
            <div className='videos__list-item-image-wrapper'>
              {' '}

              <video src='/assets/videos/2-video.mp4' muted />
            </div>

            <p>We make the weddings beautiful together</p>
          </div>
          <div className='videos__list-item'>
            <div className='videos__list-item-image-wrapper'>
        
              <video src='/assets/videos/3-video.mp4' muted />
            </div>

            <p>We make the weddings beautiful together</p>
          </div>
        </div>
      </div>