.search-wrapper {
	margin: 0;
	padding: 4rem 0 0 0;
	max-width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	
}

.search form{
	display: flex;
	width: 100%;
	margin: 2rem auto 0 auto;
	justify-content: center;
	align-items: center;
	}

.search input[type=search] { 	
	margin: 2rem 0 2rem 0rem;  
	padding-left: 0.5rem;          
	border: 4px solid #727272; 
	border-radius: 8px; 
	background: white;   
	max-width: 50%;
	font-size: 1.5rem;     
	line-height: 2.5rem;       
	    
}

.search input[type=submit] { 	
	margin: 2rem 0 2rem 1rem;             
	max-width: 35%;
	padding: 0.2rem 0.5rem;
	font-size: 1.5rem;     
	line-height: 2rem;
	border-radius: 8px; 
	background-color: #9f9f9f;
	color: #333333;		
}

.search input:hover[type=submit] { 	
	color: #ffcc33;	
}

.search input:focus{
	outline: none;
}

.search-result ul { 	
  	display: grid;
  	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: .5rem;
  	max-width: 100%;
  	list-style: none;
	margin: 1rem 0 4rem 0;	 
}

.search-result li {
	font-size: 1.3rem;     
	line-height: 2rem;
	background-color: #6b6b6b;
	border-radius: 10px 10px 0 0;
	list-style: none;
	padding: 0.1rem 0.1rem 0 0.1rem;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	  transition: 0.3s;
}

.search-result img {
	width: 100%;
	border-radius: 10px 10px 0 0;
}

.search-result figcaption {
padding-bottom: 2%;
padding-left: 2%;
text-align: center;
}

@media only screen and (max-width: 480px) {
.search-result ul {
  grid-template-columns: 1fr;
  }
}