.grid {
  display: grid;
  gap: var(--spacing-xs);
  grid-gap: var(--spacing-xl);
  padding: var(--spacing-m) 0;
}


.grid > .column {
  grid-column: span var(--columns);
  /*  grid-gap: var(--gutter);
  gap: var(--spacing-l);*/
}

.columns .column {
  flex-basis: 100%;
  margin: 0 0 5px 0;
}





@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .grid > [data-width="1/1"],
  .grid > [data-width="12/12"],
  .grid > [data-width="2/2"],
  .grid > [data-width="3/3"],
  .grid > [data-width="4/4"],
  .grid > [data-width="6/6"] {
    grid-column-start: span 12;
  }

  .grid > [data-width="11/12"] {
    grid-column-start: span 11;
  }

  .grid > [data-width="10/12"],
  .grid > [data-width="5/6"] {
    grid-column-start: span 10;
  }

  .grid > [data-width="3/4"],
  .grid > [data-width="9/12"] {
    grid-column-start: span 9;
  }

  .grid > [data-width="2/3"],
  .grid > [data-width="4/6"],
  .grid > [data-width="8/12"] {
    grid-column-start: span 8;
  }

  .grid > [data-width="7/12"] {
    grid-column-start: span 7;
  }

  .grid > [data-width="1/2"],
  .grid > [data-width="2/4"],
  .grid > [data-width="3/6"],
  .grid > [data-width="6/12"] {
    grid-column-start: span 6;
  }

  .grid > [data-width="5/12"] {
    grid-column-start: span 5;
  }

  .grid > [data-width="1/3"],
  .grid > [data-width="2/6"],
  .grid > [data-width="4/12"] {
    grid-column-start: span 4;
  }

  .grid > [data-width="1/4"],
  .grid > [data-width="3/12"] {
    grid-column-start: span 3;
  }

  .grid > [data-width="1/6"],
  .grid > [data-width="2/12"] {
    grid-column-start: span 2;
  }

  .grid > [data-width="1/12"] {
    grid-column-start: span 1;
  }
}

  .col-1\@sm,
  .col-2\@sm,
  .col-3\@sm,
  .col-4\@sm,
  .col-5\@sm,
  .col-6\@sm,
  .col-7\@sm,
  .col-8\@sm,
  .col-9\@sm,
  .col-10\@sm,
  .col-11\@sm,
  .col-12\@sm {
  }

  .col-1\@sm {
    width: 8.33333%;
  }

  .col-2\@sm {
    width: 16.5%;
    height: 400px;
  }

  .col-2\@sm.bis {
    height: 140px;
  }

  .col-2\@sm.col-3\@md {
      width: 33.33333%;
      height: 780px;
  }

  .col-2\@sm.col-3\@md.bis {
    height: 140px;
  }



  .col-3\@sm {
    width: 33%;

  }

  .col-4\@sm {
    width: 33.33333%;
  }

  .col-5\@sm {
    width: 41.66667%;
  }

  .col-6\@sm {
    width: 50%;
  }

  .col-7\@sm {
    width: 58.33333%;
  }

  .col-8\@sm {
    width: 66.66667%;
  }

  .col-9\@sm {
    width: 75%;
  }

  .col-10\@sm {
    width: 83.33333%;
  }

  .col-11\@sm {
    width: 91.66667%;
  }

  .col-12\@sm {
    width: 100%;
  }

  .container {
    position: relative;
    z-index: 2;

  }
}




@media screen and (min-width: 1024px) {


  .col-1\@md,
  .col-2\@md,
  .col-3\@md,
  .col-4\@md,
  .col-5\@md,
  .col-6\@md,
  .col-7\@md,
  .col-8\@md,
  .col-9\@md,
  .col-10\@md,
  .col-11\@md,
  .col-12\@md {
    float: left;
  }


  .col-1\@md {
    width: 8.33333%;
  }



  .col-2\@sm.col-3\@md {
      width: 33%;
  }

  .col-3\@md {
    width: 25%;
  }

  .col-4\@md {
    width: 33.33333%;
  }

  .col-5\@md {
    width: 41.66667%;
  }

  .col-6\@md {
    width: 50%;
  }

  .col-7\@md {
    width: 58.33333%;
  }

  .col-8\@md {
    width: 66.66667%;
  }

  .col-9\@md {
    width: 75%;
  }

  .col-10\@md {
    width: 83.33333%;
  }

  .col-11\@md {
    width: 91.66667%;
  }

  .col-12\@md {
    width: 100%;
  }

}

/* ── Images paysage en vue x3 : 2 colonnes sur laptop ─── */
.col-2\@sm.col-3\@md.x3-wide {
  width: 66.66% !important;
  height: 780px;
}
@media only screen and (max-width: 798px) {
  .col-2\@sm.col-3\@md.x3-wide { width: 100% !important; height: auto; }
}

@media only screen  and (min-width : 1400px) {

     .col-2\@sm {
       height: 400px;
     }

     .col-2\@sm.col-3\@md {
       height: 700px;
     }

     .col-2\@sm.col-3\@md.x3-wide { height: 700px; }
}
@media only screen  and (min-width : 1550px) {

     .col-2\@sm {
       height: 500px;
     }

}
@media only screen  and (min-width : 1800px) {

     .col-2\@sm {
       height: 520px;
     }

     .col-2\@sm.col-3\@md {
       height:  920px;
     }
}



@media only screen and (max-width: 798px) {

    .col-2\@sm {
      width: 25%;
      height: 175px;
    }


    .col-2\@sm.col-3\@md {
      height: 350px;
      width: 50%;
    }

    .col-2\@sm.col-3\@md.bis {
      height: 166px;
    }
}

@media screen and (max-height: 600px)  {


}


   @media only screen  and (max-width: 400px) {

       .col-2\@sm.col-3\@md {
         height: 250px;
       }
   }