@charset "utf-8";

#wrapper {
  width: 850px;
  margin: 0 auto 150px;
}

#grid {
  display: grid;
  grid-template:
  "item1 item2 item3" 270px
  "item4 item5 item6" 270px
  "item7 item8 item9" 270px
	  "item10 item11 item12" 270px
  "item13 item14 item15" 270px/
   270px 270px 270px;
	/* grid-template-rows: repeat(auto-fit, 200px);
	 grid-template-columns:repeat(auto-fit, 270px);*/
  gap: 25px;
}





#grid img {
  width: 270px;
	height: 241px;
  object-fit: cover;
	transition: all 0.3s;
	outline: 1px solid #ccc;
}
#grid img:hover {
transform: translate(-7px,-7px);
box-shadow: 7px 7px 5px #aaa;
}

#grid p{
  margin-top: -5px;
	text-align: right;
  /*text-shadow: 1px 1px 0 #fff;*/
  /*position: absolute;
  top: calc( 100% - 3px );
  left: calc( 100% - 170px );*/
}

#item1 {
  grid-area: item1;
  /*background: red;*/
}
#item2 {
  grid-area: item2;
  /*background: blue;*/
}

#item3 {
  grid-area: item3;
  /*background: green;*/
}

#item4 {
  grid-area: item4;
  /*background: yellow;*/
}

#item5 {
  grid-area: item5;
  /*background: purple;*/
}

#item6 {
  grid-area: item6;
  /*background: pink;*/
}
#item7 {
  grid-area: item7;
  /*background: pink;*/
}
#item8 {
  grid-area: item8;
  /*background: pink;*/
}
#item9 {
  grid-area: item9;
  /*background: pink;*/
}
#item10 {
  grid-area: item10;
  /*background: pink;*/
}
#item11 {
  grid-area: item11;
  /*background: pink;*/
}
#item12 {
  grid-area: item12;
  /*background: pink;*/
}
#item13 {
  grid-area: item13;
  /*background: pink;*/
}
#item14 {
  grid-area: item14;
  /*background: pink;*/
}
@media screen and (max-width: 849px) {
	#wrapper {
		width: 555px;
    margin: 0 auto;
	}
	#grid {
  grid-template:
  "item1 item2" 270px
	"item3 item4" 270px
	"item5 item6" 270px
	"item7 item8" 270px
		"item9 item10" 270px
	"item11 item12" 270px
	"item13 item14" 270px/
   270px 270px;
	 /* justify-content: space-around; */
	}
}
@media screen and (max-width: 479px) {
#wrapper {
  width: 85%;
}
#grid {
	grid-template:
  "item1" 270px
	"item2" 270px
	"item3" 270px
	"item4" 270px
	"item5" 270px
	"item6" 270px
	"item7" 270px
	"item8" 270px
	"item9" 270px
	"item10" 270px
	"item11" 270px
	"item12" 270px
	"item13" 270px
	"item14" 270px/
   270px;
	 margin:0 auto;
	 justify-content: space-around;
}
}