@media only screen and (min-width: 320px)
{body{
  background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);}
  .container, .gallery{
  display:grid;
  grid-template-columns: 2fr;
  margin:1rem;
  }
  }

@media only screen and (min-width: 768px)
{body{
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);}
  .container{
    display:grid;
    align-content: center;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    }
}

@media only screen and (min-width: 992px)
{body{
  background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
  background-blend-mode: screen;
  ;
}}

@media only screen and (min-width: 1200px)
{body{
  background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%)
  ;
}.container{
  display:grid;
  align-content: center;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  justify-content: center;
  column-gap:150px;
  margin:1rem;
  }
}


.hero-image{
  display:grid;
    background-image: url(https://images.unsplash.com/photo-1485134532658-d720895a3b5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80);
height:22rem;
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  position: relative;
  opacity: 0.8;
}
.hero-text{
  position:absolute;
  text-align:center;
  color:white;
  font-family: monospace,"Lucida Console", "Courier New", monospace;
  font-size:40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
}
h2{
  text-align:center;
  font-size: medium;
  font-family:monospace;
margin-top:-8px;
margin-bottom: -8px;
background-color: #9ca18d20;

}
hr{ 
  height: 2px;
  background-color: #9ca18d20;
  border:5px;
 }
/* 3 colum */


/* grid layout */
.container{
  display:grid;
  align-content: center;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  justify-content: center;
  column-gap:150px;
}
.gallery{
  background-color: rgb(131,176,174,0.2);
  text-align: center;
  border-radius: 30px;
  box-shadow: 3px 3px 10px rgb(112, 113, 114,0.5);
}
p{
  text-align: left;
  padding:0 50px;

}
.container .gallery img{
  width:100%;
  height:100%;  
  border-radius: 30px;  
  box-shadow: 3px 3px 6px rgb(112, 113, 114,0.5);
  object-fit:fill;
}

a{color:black;
  font-family:monospace;
text-align: left;}
  a:hover {
    color:white;
  }
footer{
  clear:both;
  text-align: center;
  font-family:monospace;
  position:relative;
}