main{
    display: flex;
    justify-content: center;
    text-align: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(7, 150px);
  grid-template-rows: repeat(5, 150px) 30px;
  /* grid-template-areas:
    "contentnil content2 content2 content3 content3 content4 content4"
    "content1 content2 content2 content3 content3 content4 content4"
    "content5 content6 content7 content13 content13 content8 content8"
    "contentnil content61 content71 content13 content13 content8 content8"
    "contentnil content9 content9 content10 content11 content12 content12"
    "contentnil content9 content9 content101 content111 content12 content121"; */
}
/* sidebar */
img{
    width: 100%;
    height: auto;
}
h3{
    font-size: 1.3rem;
}
.content{
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
input{
    width: 90%;
    background-color:#ddd;
    border: none;
    padding: 3px;
}
.content1 {
  grid-column: 1/2;
  grid-row: 2/3;
}
.content5 {
    grid-column: 1/2;
    grid-row: 3/4;
}
/* first row */
.content2 {
    grid-column: 2/4;
    grid-row: 1/3;
    background-image: url(./img/Fresh-fruit.jpg);
}
.content3 {
    grid-column: 4/6;
    grid-row: 1/3;
    background-image: url(./img/Fruit-Vegetables.jpg);

}
.content4 {
    grid-column: 6/8;
    grid-row: 1/3;
    background-image: url(./img/vegetable-getty.jpg);

}
/* second row */
.content6 {
    grid-column: 2/3;
    grid-row: 3/4;
    background-image: url(./img/child.jpg);

}
.content61 {
    grid-column: 2/3;
    grid-row: 4/5;
    background-color: coral;
}

.content7 {
    grid-column: 3/4;
    grid-row: 3/4;
    background-image: url(./img/child2.jpg);

}
.content71 {
    grid-column: 3/4;
    grid-row: 4/5;
    background-color: cadetblue;
}
.content13 {
    grid-column: 4/6;
    grid-row: 3/5;
    background-image: url(./img/onion.jpg);

  }
.content8 {
    grid-column: 6/8;
    grid-row: 3/5;
    background-image: url(./img/bamya.jpg);

}
/* third row */
.content9 {
    grid-column: 2/4;
    grid-row: 5/7;
    background-image: url(./img/eggplant.jpg);

}
.content10 {
    grid-column: 4/5;
    grid-row: 5/6;
    background-image: url(./img/marul.jpg);

}
.content101 {
    grid-column: 4/5;
    grid-row: 6/7;
    background-color: darkkhaki;
}
.content11 {
    grid-column: 5/6;
    grid-row: 5/6;
    background-image: url(./img/karnibahar.jpg);

}
.content111 {
    grid-column: 5/6;
    grid-row: 6/7;
    background-color: darksalmon;
}
.content12 {
    grid-column: 6/8;
    grid-row: 5/7;
    background-image: url(./img/expensive.jpg);

}
.content121 {
    grid-column: 7/8;
    grid-row: 6/7;
}

/* transparan texts */
.content14 {
    grid-column: 3/4;
    grid-row: 2/3;
    background-color:rgba(100, 200, 30, 0.7);
}
.content15 {
    grid-column: 5/6;
    grid-row: 2/3;
    background-color:rgba(200, 200, 30, 0.7);
}
.content16 {
    grid-column: 7/8;
    grid-row: 2/3;
    background-color:rgba(100, 200, 130, 0.7);
}

.content17 {
    grid-column: 5/6;
    grid-row: 4/5;
    background-color:rgba(100, 100, 30, 0.7);
}
.content18 {
    grid-column: 7/8;
    grid-row: 4/5;
    background-color:rgba(100, 200, 230, 0.7);
}

.content19 {
    grid-column: 3/4;
    grid-row: 6/7;
    background-color:rgba(100, 0, 30, 0.7);
    text-decoration: none;
    color: white;
}
.content19 a{
    text-decoration: none;
    color: white;
}
.content20 {
    grid-column: 7/8;
    grid-row: 6/7;
    background-color:rgba(0, 200, 30, 0.7);
}

/* .content1{
    grid-column: 1/2;
    grid-row: 2/3;
}
.content2{
    grid-column: 1/2;
    grid-row: 3/4;
}
.content3{
    grid-column: 2/4;
    grid-row: 1/ span 2;
}
.content4{
    grid-column: 3/4;
    grid-row: 2/3;
}
.content5{
    grid-column: 3/4;
    grid-row: 2/3;
}
.content4{
    grid-column: 3/4;
    grid-row: 2/3;
}
.content1{
    grid-row: 2/3;
}
.content1{
    grid-row: 2/3;
}
.content1{
    grid-row: 2/3;
} */