body{display: grid;
    grid-auto-flow :column;
    place-content: center;
    gap: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 35px;
    background: linear-gradient(to right, white, #3f3f3f);
    }


   main img {
        width: 190%;
        margin-left: 40px;
        --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
        --m:
          left   var(--_i,0%) top    var(--_g),
          bottom var(--_i,0%) left   var(--_g),
          top    var(--_i,0%) right  var(--_g),
          right  var(--_i,0%) bottom var(--_g);
        -webkit-mask: var(--m);
                mask: var(--m);
        filter: grayscale();
        transition: .3s linear;
        cursor: pointer;
      }
    img:hover {
        --_i: 10%;
        filter: grayscale(0);
      }
      
    nav{
  
        grid-column:3/6;
        margin: 10px;
    
    }
    
    nav a{
        margin-left:30px ;
        margin-right: 30px;
        float: right;
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 20px;
        font-family: "Courier New";
        text-shadow: 2px 2px 4px rgb(0, 0, 0);
       
    
    }
    nav li{
       
        
        list-style: none;
    }
    section{margin-top: 15px;
        grid-column: 3/5;
    }
    section p{
        
        margin: 55px;
        font-size:20px;
        font-family: "Courier New";
        line-height: 1.7;
    }
    h1{
        font-size: 170px;
        grid-column: 5/6;
        color: #000000; 
        opacity: 0.05; 
        text-align: center;
        margin-top: -10px;
    }
  body:nth-child(7){
    width: 100%;
  }
figure img{
    width: 100%;
    filter: grayscale();
    transition: .3s linear;
    cursor: pointer;
  
}
figure{
    grid-column: 2/5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    column-gap: 12px;
}
figure :nth-child(8) {
  grid-column: 4/5;
  margin-top: -110px;
   
}
figure :nth-child(7) {
  margin-top: 20px;
   
}
figure :nth-child(6) {
  margin-top: -40px;
   
}
figure :nth-child(5) {
  margin-top: -10px;
   
}
figure :nth-child(3) {
  margin-top: 30px;
   
}
figure :nth-child(2) {
  margin-top: 40px;
   
}
 h2 {
    text-align:center;
    font-family:"Playfair Display", serif; font-weight:400;
    text-transform:uppercase;
    font-size:36px; letter-spacing:1px;
    grid-column: 1/6;
    display: grid;
   
  }
  
h2:after,h2:before{
    content: " ";
    border-bottom: 2px solid #ccc;
  }
  footer{
    display: grid;
    grid-template-columns: 2fr 0.1fr 2fr;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: -40px;
    grid-row: 5/6;
    grid-column: 1/6;
    height: 80px;
    background-color: #3f3f3f;
  }
  footer a {
    margin-top: 20px;
    text-align: center;
  
  }
  footer img{
    width: 100%;
    box-shadow: #000000;
  }
    

