body {
		  display: flex;
		  justify-content: center;
		}

		.container {
		  margin: auto;
		  font-size: 0;
		  max-width: 1280px;
		  display: grid;
		  grid-template-columns: 1fr 1fr 1fr 1fr;
		  grid-template-rows: 1fr 1fr 1fr;
		  gap: 19px 19px;
		  grid-auto-flow: row;
		  grid-template-areas:
			"r1-c1 r1-c1 r1-c3 r1-c4"
			"r1-c1 r1-c1 r2-c3 r2-c4"
			"r3-c1 r3-c2 r2-c3 r3-c4";
		}

		.r1-c1 { grid-area: r1-c1;  }


		.r3-c1 { grid-area: r3-c1;}


		.r3-c2 {

		  grid-area: r3-c2;
		  width: 100%;
		}

		.r1-c3 { grid-area: r1-c3; }
		.r1-c4 { grid-area: r1-c4; }
		.r2-c3 { grid-area: r2-c3; }
		.r2-c4 { grid-area: r2-c4; }
		.r3-c4 { grid-area: r3-c4; }
		img {
		  width: 100%;
		  height: auto;
		}
		.bg {
		  background-repeat: no-repeat;
		  background-position: 50% 50%;
		  background-size: contain;
		  display: flex;
		}
		.bg img {
		  width: 50%;
		  max-width: 300px;
		  margin: auto;
		}

		@media all and (min-width: 768px) and (max-width: 1023px) {
		.container {
		 
		  grid-template-columns: 1fr 1fr 1fr; 
		  grid-template-rows: 1fr 1fr 1fr 1fr; 
		  gap: 28px 28px; 
		  grid-template-areas: 
			"r1-c1 r1-c1 r1-c3"
			"r1-c1 r1-c1 r2-c3"
			"r3-c1 r1-c4 r2-c3"
			"r3-c2 r2-c4 r3-c4"; 
		}
		.r1-c1 { min-width: 346px;min-height: 346px;}
		}

		@media all and (max-width: 763px) and (orientation: portrait) {
		.container {
		  grid-template-columns: 1fr 1fr;
		  gap: 6vw 5vw; 
		  grid-template-areas: 
			"r1-c1 r1-c1"
			"r3-c1 r1-c3"
			"r1-c4 r3-c2"
			"r2-c3 r3-c4"
			"r2-c3 r2-c4"; 
		}
		  div {
			height: auto;
			height: 45vw;
			overflow: visible;
		  }
		  .bg {
		  width: 98vw;
		  height: 98vw;  
		}
		}


		.punter {
			position: relative;
			transition: transform .3s;
		}
		.punter:hover {
		  	-webkit-transform: rotate(10deg) scale(0.85);
			transform: rotate(10deg) scale(0.85);
			-webkit-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
		}
		.punter::before {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 2;
			display: block;
			content: '';
			width: 0;
			height: 0;
			background: rgba(255,255,255,.2);
			border-radius: 100%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			opacity: 0;
		}
		.punter:hover::before {
			-webkit-animation: circle .75s;
			animation: circle .75s;
		}
		
		.punter2 {
			position: relative;
			transition: transform .9s;
		}
		.punter2:hover {
		  	-webkit-transform: rotate(-370deg) scale(0.5);
			transform: rotate(-370deg) scale(0.5);
			-webkit-transition: .9s ease-in-out;
			transition: .9s ease-in-out;
		}
		.punter2::before {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 2;
			display: block;
			content: '';
			width: 0;
			height: 0;
			background: rgba(255,255,255,.2);
			border-radius: 100%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			opacity: 0;
		}
		.punter2:hover::before {
			-webkit-animation: circle .75s;
			animation: circle .75s;
		}
		
		
		@-webkit-keyframes circle {
			0% {
				opacity: 1;
			}
			40% {
				opacity: 1;
			}
			100% {
				width: 110%;
				height: 110%;
				opacity: 0;
			}
		}
		@keyframes circle {
			0% {
				opacity: 1;
			}
			40% {
				opacity: 1;
			}
			100% {
				width: 110%;
				height: 110%;
				opacity: 0;
			}
		}