.parent {
    display: grid;
    grid-template-columns: repeat(3, 0.3fr);
    grid-template-rows: 0.2fr 0.6fr 0.1fr;
    grid-column-gap: 3px;
    grid-row-gap: 10px;
    }
    
    .bott { grid-area: 3 / 1 / 4 / 4; }
    .top{ grid-area: 1 / 1 / 2 / 4; }
    .product1 { grid-area: 2 / 1 / 3 / 2; }
    .product2{ grid-area: 2 / 2 / 3 / 3; }
    .product3 { grid-area: 2 / 3 / 3 / 4; }
.top,.bott
{background: rgb(236,251,63);
    background: linear-gradient(180deg,rgba(116,235,213,1) 8%, rgba(159,172,230,1) 93%);
    text-align: center;
    text-size-adjust:2rem;
    padding-top: px;
    border-radius: 10px;
    margin: 20px;
    box-shadow: 0 0 30px gray;
    }    
    .bott
    {
    background: linear-gradient(0deg, rgba(116,235,213,1) 8%, rgba(159,172,230,1) 93%);
      }
    h1{text-align: center;
      text-shadow: 3px 3px 5px rgba(0,0,0,0.2);}
    h2{margin-top:30px;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.2);}

    
    .product1,.product2,.product3{
        background-color: #9face6;
        color: rgb(50, 19, 97);
        border: 6px;
        border-color: black;
        border-radius: 10px;
        margin: 20px;
        padding: 10px; 
        text-align: center;
        box-shadow: 0 0 30px gray;
     
      }
      img{ border-radius: 10px; }
      .product1{background: linear-gradient(90deg, rgba(116,235,213,1) 8%, rgba(159,172,230,1) 40%); }
      .product3{background:linear-gradient(270deg, rgba(116,235,213,1) 8%, rgba(159,172,230,1) 40%);
      }