.grid400 {

    --gap: 16px;
    --num-cols: 4;
    --row-height:632px;
    box-sizing: border-box;
    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
    overflow: hidden;
  
  }

  .grid400 img
  {
    
  }

  @media (max-width:1028px){

    .grid400 {
        --gap: 16px;
        --num-cols: 2;
        --row-height:750px;
        box-sizing: border-box;
        padding: var(--gap);
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-auto-rows: var(--row-height);
        gap: var(--gap);
        overflow: hidden;
      
      }

      .grid400 img
      {
        height: 400px;
      }

  }

  @media (min-width:768px) and (max-width:900px){

    .grid400 {
        --gap: 16px;
        --num-cols: 2;
        --row-height:650px;
        box-sizing: border-box;
        padding: var(--gap);
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-auto-rows: var(--row-height);
        gap: var(--gap);
        overflow: hidden;
      
      }

      .grid400 img
      {
        height: 400px;
      }

  }

  
@media (max-width:768px){

    .grid400 {
        --gap: 16px;
        --num-cols: 1;
        --row-height:600px;
        box-sizing: border-box;
        padding: var(--gap);
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-auto-rows: var(--row-height);
        gap: var(--gap);
        overflow: hidden;
      
      }

      .grid400 img
      {
        height: 400px;
      }

}

.grid40 {

    --gap: 16px;
    --num-cols: 4;
    --row-height:609px;
    box-sizing: border-box;
    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
    overflow: hidden;
  
  
  }

  @media (max-width:1028px){

    .grid40 {
        --gap: 16px;
        --num-cols: 2;
        --row-height:750px;
        box-sizing: border-box;
        padding: var(--gap);
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-auto-rows: var(--row-height);
        gap: var(--gap);
        overflow: hidden;
      
      }

      .grid40 img
      {
        height: 400px;
      }

  }

  @media (min-width:768px) and (max-width:900px){

    .grid40 {
        --gap: 16px;
        --num-cols: 2;
        --row-height:650px;
        box-sizing: border-box;
        padding: var(--gap);
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-auto-rows: var(--row-height);
        gap: var(--gap);
        overflow: hidden;
      
      }

      .grid40 img
      {
        height: 400px;
      }

  }

  
@media (max-width:768px){

    .grid40 {
        --gap: 16px;
        --num-cols: 1;
        --row-height:650px;
        box-sizing: border-box;
        padding: var(--gap);
        display: grid;
        grid-template-columns: repeat(var(--num-cols), 1fr);
        grid-auto-rows: var(--row-height);
        gap: var(--gap);
        overflow: hidden;
      
      }

      .grid40 img
      {
        height: 400px;
      }

}