// HTML

 <div className='container' data-columns="4">
          <div className="container__block container__block--image1"></div>
          <div className="container__block container__block--image2"></div>
          <div className="container__block container__block--image3"></div>
          <div className="container__block"></div>
      </div>




// CSS

.container{
  width: 1200px;
  height: 600px;
  margin: auto auto;
   background-color: red;
   display: grid;
  //replace the value we want to make dynamic with a var(--something, x) where x is a fallback if --something doesnt exist
  grid-template-columns: repeat(var(--column-count, 4), 1fr); 
  place-content: center;
   align-items: center;
   justify-content: center;
   justify-items: center;

   // use data attribute vales on the html to change the variable --something
   &[data-columns="2"]{
      --column-count: 2;
   }

   &[data-columns="3"]{
    --column-count: 3;
    }

    &[data-columns="4"]{
      --column-count: 4;
    }



   &__block{
    width: 200px;
    height: 200px;
    background-color: rebeccapurple;
    border: 1px solid white;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--selected-url);

        &--image1{
          --selected-url: url('https://source.unsplash.com/user/c_v_r')
        }

        &--image2{
          --selected-url: url('https://www.kimballstock.com/images/car-stock-photos.jpg')
        }

        &--image3{
          --selected-url: url('https://media.gettyimages.com/id/1636857191/photo/topshot-moto-prix-esp-catalunya-practice.jpg?s=2048x2048&w=gi&k=20&c=bt3AqEevYACDxkxf5Rom1MqE4bjHrMG2apxxTkmedJ8=')
        }


   }
 }