[III]

Спасибо за найденные ошибки. < в HTML убрал. Сделал так.

body {
      margin: 0;
    }
.container {

  width: 100%;
  margin: 0 auto;
  max-width: 1064px;
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }

.green {
      float: left;         
      z-index: -1; // говорит браузеру сделать это изображение сверху
  }

.black {
      float: left;         
      z-index: -1; // говорит браузеру сделать это изображение сверху
  }


 .myImg {
float: left;         
      z-index: 2; 
  }

.brevno {
      float: left;         
      z-index: 2; 
  }

.roza {
      float: left;         
      z-index: 2; 
  }

.lutik {
      float: left;         
      z-index: 2; 
  }

@supports (display: grid) {
.image-stack {
    display: grid;
    position: relative; // необходимо, чтобы перекрытие работало
    grid-template-columns: repeat(12, 1fr);
  }
}

 .myImg {
    display: none; /* Скрыть изображение по умолчанию */
    transition: opacity 2s; /* Плавное изменение прозрачности за 2 сек */   
}


.green {
 width: 1064px;
height: 510px;
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 9em;
margin-left: 0em;  
  }

 .black {
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 6.2em;
margin-left: 0em;  
  }

 .brevno {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: 32em;
margin-left: -45em;
display:none;
}

.roza {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -45em;
}

.lutik {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -15em;
}

но всеравно не хочет работать.