body {
    background-color:darkgray;
  height: 400px;
   

}

.h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
color: red;
}



.grid {
    display: grid;
    grid-template-columns:auto auto auto auto ;  /*repeat(7, 1fr);7 columns*/
    grid-template-rows:200px auto auto auto;
    }

.section1 {
    grid-column:1;
    grid-row:1/5;
    background-color:rgb(255, 0, 0);
    color:rgb(0, 0, 0);
    text-align:center;
    Font-size:20px;
  /*  position: sticky;
*/    font-family:'Times New Roman';
height: 500px;

}

.hero-image {
    background-image:  url("media/webdesign.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   position: relative;
  }
  
  .hero-text {
    text-align: center;
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(6, 166, 214);
  }

.section2 {
    grid-column:2/5;
    grid-row:1;
    background-color:rgb(82, 48, 87);
    color:rgb(0, 0, 0);
    text-align:center;
    Font-size:40px;
    position: sticky;
font-family:'Times New Roman';

}

.section3 {
    grid-column:2/5;
    grid-row:2/5;
    background-color:rgb(255, 255, 255);
    color:rgb(0, 0, 0);
    text-align:center;
    Font-size:20px;
    position: sticky;
font-family:'Times New Roman';

}