* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color:lightgoldenrodyellow;
}


/* первая картинка */
.items{
  display: grid;
  grid-template-columns: 100px 50px repeat(4, 100px);
  grid-gap: 5px;
  margin-top:  40px;

}
.item{
  color: white;
  padding: 10px;
  text-align: center;
}

.item:nth-child(1){
  background-color: blueviolet;
}
.item:nth-child(2){
  background-color: red;
  grid-column: 2/ span 2;
  grid-row: 1/ span 2;
}
.item:nth-child(3){
  background-color: rgb(206, 173, 10);
  grid-column: 4/ span 2;
  grid-row: 1/ span 4;
}
.item:nth-child(4){
  background-color: plum;
}
.item:nth-child(5){
  background-color: green;
}
.item:nth-child(6){
  background-color: aquamarine;
}
.item:nth-child(7){

  background-color: brown;
}
.item:nth-child(8){
  background-color: blue;
}
.item:nth-child(9){
  background-color: black;
}
.item:nth-child(10){
  background-color: rgb(83, 0, 200);
}
.item:nth-child(11){
  background-color: rgb(7, 251, 7);
   grid-column: 1 / span 3;
}
.item:nth-child(12){
  background-color: rgb(94, 38, 38);
  grid-column: 6;
}

/* вторая картинка */
.items1{
  margin-top:  40px;
  width: 470px;
  display: grid;
  grid-template-columns: repeat(9, 50px);
  grid-template-rows: repeat(4, 50px);
  grid-gap: 2px;
  background-color: rgb(84, 101, 150);
  color: blue;
  
}
.item1{
  color: white;
  padding: 5px;
  text-align: center;
  border: 2px solid rgb(36, 160, 59);
  
}
.item1:nth-child(1){
  color: yellow;
  border: 2px solid yellow;
}
.item1:nth-child(2){
  color: yellow;
  border: 2px solid yellow;
}
.item1:nth-child(3){
  color: yellow;
  border: 2px solid yellow;
  grid-column-start: 7;
}
.item1:nth-child(8){
  color: yellow;
  border: 2px solid yellow;

}.item1:nth-child(9){
  color: yellow;
  border: 2px solid yellow;
}
.item1:nth-child(24){
  color: yellow;
  border: 2px solid yellow;
  grid-column-start: 2;
}
.item1:nth-child(28){
  color: yellow;
  border: 2px solid yellow;
 
}


/* третья картинка нужно начать с больших дивовб тогдаб возможно былобы меньше действий.  */
.items2{
  margin-top:  40px;
  display: grid;
  grid-template-columns: repeat(10, 50px);
  grid-template-rows: repeat(6, 25px);
}
.item2{
  color: rgb(0, 0, 0);
  text-align:right;
  text-align:end;
  border: 1px solid rgb(0, 0, 0);
}
.item2:nth-child(1){
  grid-column: 6/ span 2;
  grid-row: 1/ span 2;
  background-color: rgb(230, 252, 141);
}
.item2:nth-child(2){
  grid-column: 4/ span 2;
  grid-row: 4/ span 2;
  background-color:yellow;
 
}
.item2:nth-child(3){
  grid-column: 9/ span 2;
  grid-row: 2/ span 2;
  background-color: yellow;
 
}
.item2:nth-child(4){
  grid-column: 6/ span 2;
  grid-row: 5/ span 2;
  background-color: rgb(141, 252, 146);
 
}
.item2:nth-child(5){
  grid-column: 3;
  grid-row: 2/4;
  background-color: yellow;
 
}
.item2:nth-child(6){
  grid-column: 4/6;
  grid-row: 2/4;
  background-color: pink;
 
}
.item2:nth-child(7){
  background-color: yellow;
 
}
.item2:nth-child(8){
  grid-column: 6/ span 2;
  grid-row: 3;
  background-color: yellow;
 
}
.item2:nth-child(9){
  grid-column: 3/span 2;
  grid-row: 1;
  background-color: yellow;
 
}
.item2:nth-child(10){
  grid-column: 9/ span 2;
  grid-row: 6;
  background-color: yellow;
}
.item2:nth-child(11){
  grid-column: 8;
  grid-row: 2/ span 2;
  background-color: rgb(141, 208, 252);
 
}
.item2:nth-child(12){
  grid-column: 4/6;
   grid-row: 6;
  background-color:yellow;
}
.item2:nth-child(13){
  grid-column: 1/ span 2;
  grid-row: 1/ span 2;
  background-color: rgb(141, 252, 146);
 
}
.item2:nth-child(14){
  grid-column: 7/9;
  grid-row: 4;
  background-color: yellow;
 
}
.item2:nth-child(15){
  grid-column: 10;
  grid-row: 1;
  background-color: pink;
}
.item2:nth-child(16){
  grid-column: 2/4;
  grid-row: 4;
  background-color: yellow;
 
}
.item2:nth-child(17){
  grid-column: 3;
  grid-row: 5/ span 2;
  background-color:yellow;
 
}
.item2:nth-child(18){
  grid-column: 5;
  grid-row: 1;
  background-color: rgb(141, 208, 252);
 
}
.item2:nth-child(19){
  background-color: pink;
}
.item2:nth-child(20){
  grid-column: 8/ span 2;
  grid-row: 1;
  background-color: yellow;
 
}
.item2:nth-child(21){
  grid-column: 9/ span 2;
  grid-row: 4/ span 2;
  background-color: rgb(221, 252, 141);
 
}
.item2:nth-child(22){
  grid-column: 1/3;
  grid-row: 3;
  background-color: rgb(241, 252, 141);
 
}
.item2:nth-child(23){
  grid-column: 8;
  grid-row: 5/ span 2;
  background-color: yellow;
 
}
.item2:nth-child(24){
  grid-column: 1/3;
  grid-row: 5/ span 2;
  background-color: rgb(141, 208, 252);
}

/* последнее задание */
.city{
  margin-top:  40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}
 h1{
  text-align: center;
 }
 h4{
  text-align: center;
 }

.container{
  display: grid;
  grid-template: repeat(7, 200px) / repeat(3, 200px);
  grid-gap: 5px;
}
.card{
  border-radius: 10px;
 box-shadow: 10px 5px 20px 1px  black;
}
.cards-1{
  grid-column: 1/3;
  grid-row: 1/3;
  background-image: url('https://vgr.by/wp-content/uploads/2021/04/grodno_12.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  transition: 2s, scale;
  
}
.cards-1:hover{
transform: scale(1.5);
}

.cards-2{
  grid-column: 3;
  grid-row: 1/3;
  background-image: url('https://vgr.by/wp-content/uploads/2021/04/grodno_12.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  transition: 2s, scale;
}
.cards-2:hover{
  transform: scale(1.5);
}

.cards-3{
  grid-column: 1/4;
  grid-row: 3;
  background-image: url('https://planetofhotels.com/guide/sites/default/files/styles/paragraph__live_banner__lb_image__1880bp/public/live_banner/Grodno.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  transition: 2s, scale;
}
.cards-3:hover{
  transform: scale(1.5);
}

.cards-4{
  background-image: url(../media/pict1.jpeg);
  transition: 2s, scale;
}
.cards-4:hover{
  transform: scale(1.5);
}

.cards-5{
  grid-column: 2/4;
  grid-row: 4;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS64ACMtIWqj6mQPRKrYYBxWpWnWKBoTzCX64eWe0KNLlzoWZHx7pF_rfchDlmOizK-_zg&usqp=CAU');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 2s, scale;
}
.cards-5:hover{
  transform: scale(1.5);
}

.cards-6{
  grid-column: 1;
  grid-row: 5/7;
  background-image: url('https://vgr.by/wp-content/uploads/2021/12/zima.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 2s, scale;
}
.cards-6:hover{
  transform: scale(1.5);
}

.cards-7{
  grid-column: 2/4;
  grid-row: 5;
  background-image: url('https://trofei.by/images/wysiwyg/2016-12-06/FgM4b0WTR3F7Zuhs.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 2s, scale;
}
.cards-7:hover{
  transform: scale(1.5);
}

.cards-8{
  background-image: url('https://grodnoplustv.by/images/news/2022/05/06/anons.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 2s, scale;
}
.cards-8:hover{
  transform: scale(1.5);
}

.cards-9{
  background-image: url('https://grodno-region.by/images/storage/news/011323_119047_big.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 2s, scale;
}
.cards-9:hover{
  transform: scale(1.5);
}

.cards-10{
  grid-column: 1/4;
  grid-row: 7;
  background-image: url('https://st4.depositphotos.com/20782690/38439/i/950/depositphotos_384397110-stock-photo-panorama-promenade-overlooking-old-city.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 2s, scale;
}
.cards-10:hover{
  transform: scale(1.5);
}