* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   font-family: Arial, sans-serif;
background-color: rgb(0, 0, 0);

}
header,
footer {
   background-color: #888787;
   color: #fff;
   text-align: center;
   padding: 20px;
}

.container {
   flex: 1; 
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   padding: 20px;
}

.item {
   flex: 1 1 calc(33.333% - 20px);
}
img,
video {
   width: 100%;
   height: auto;
   display: block;
}

.img1   { order: 1; }
.video1 { order: 2; }
.img2   { order: 3; }
.video2 { order: 4; }
.img3   { order: 5; }
.video3 { order: 6; }

@media (max-width: 900px) {
   .item {
       flex: 1 1 calc(50% - 20px);
   }
   .video1 { order: 1; }
   .img1   { order: 2; }
   .video2 { order: 3; }
   .img2   { order: 4; }
   .video3 { order: 5; }
   .img3   { order: 6; }
}

@media (max-width: 600px) {
   .item {
       flex: 1 1 100%;
   }
   .img1   { order: 1; }
   .img2   { order: 2; }
   .img3   { order: 3; }
   .video1 { order: 4; }
   .video2 { order: 5; }
   .video3 { order: 6; }
}