index1.css

body
{
    font-size: 15px;
}
 button
 {
    background: #ffc600;
    border: 0;
    padding: 10px 20px;
 }
img
{
    max-width: 100%;
}
/* .wrapper */

.wrapper
{
    display: grid;
    grid-gap:20px;
}

.top
{
    display: grid;
    grid-gap: 20px;
    grid-template-areas: "hero hero cta1" "hero hero cta2";
}
.hero
{
    grid-area: hero;
    min-height: 400px;
    background: white url(./images/eaters-collective-12eHC6FxPyg-unsplash.jpg);
    background-size: cover;
    background-position: bottom right;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items:start;
    justify-content: center;
}

.hero > * 
{
    background: var(--yellow);
    padding: 5px;
}

.cta
{
    background: var(--yellow);
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.cta p{
    margin: 0;
}
.cta1
{
    grid-area: cta1;
}
.cta2
{
    grid-area: cta2;
}
.price
{
    font-size: 60px;
    font-weight: 300;
}

/*Navigation*/

.menu ul
{
    display: grid;
    grid-gap: 10px;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
}
.menu a{
    background: var(--yellow);
    display: block;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    color: var(--black);
    text-transform: uppercase;
    font-size: 20px;
}


.menu a:hover, a:active
{
    background:#b38c00;
}
[aria-controls="menu-list"]
{
    display: none;
}
/*features!*/

.features
{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit , minmax(200px ,1fr));
    
}

.feature{
    background: white;
    padding: 10px;
    border: 1px solid white;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    position:relative;
}

 
.feature .icon
{
    width: 50px;
    height: 50px;
}

.feature p{
    color:var(--black);
}

/*About Section */

.about {
    background: white;
    padding: 50px;
    display: grid;
    grid-template-columns: 400px 1fr;
    align-items: center;
}

.gallery
{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}
.gallery img
{
    width: 100%;
}

.gallery h2{
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 20px;
    align-items: center;
}
.gallery h2:before, .gallery h2:after{
    display: block;
    content: '';
    height: 10px;
    background: linear-gradient(to var(--direction ,left) ,var(--yellow), transparent);
}
.gallery h2:after {
    --direction: right;
  }

@media screen and (max-width:1000px) {
    .menu {
        perspective: 800px;
      }
      [aria-controls="menu-list"] {
        display: block;
        margin-bottom: 10px;
      }
    
      .menu ul {
        max-height: 0;
        overflow: hidden;
        transform: rotateX(90deg);
        transition: all 0.5s;
      }
    
      [aria-expanded="true"] ~ ul {
        display: grid;
        max-height: 500px;
        transform: rotateX(0);
      }
    
      [aria-expanded="false"] .close {
        display: none;
      }
    
      [aria-expanded="true"] .close {
        display: inline-block;
      }
    
      [aria-expanded="true"] .open {
        display: none;
      }

}
@media screen and (max-width:700px) {
   
    .top
    {
        grid-template-areas: "hero hero" "cta1 cta2";
    }
    .about{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:500px) {
    .top
    {
        grid-template-areas: "hero" "cta1" "cta2";
    }
    .gallery
{
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap:20px;
    grid-template-columns: 100%;
}
}
.cta:hover ,.cta:active
{
    transform: rotateX(360deg);
    transition: all 0.8s;
}
.overlay
{
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: url(./images/eaters-collective-12eHC6FxPyg-unsplash.jpg);
  background-position: center;
  background-size: cover;
  opacity: 0.5;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.img_over
{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
   

}
.feature:hover .overlay ,.feature:active .overlay
{
    bottom: 0%;
    height: 100%;
    
}