main.css

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    height: 100vh;
}
/* .container {
    max-width: 730px;
}
.container {
    width: 1170px;
}
.container {
    width: 970px;
}
.container {
    width: 750px;
} */
.main{
    background: blue;
    display: grid;

    grid-template-columns: repeat(4, 1fr 1fr 1fr);
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-gap: 1em;
  height: 50vh;
    /* grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-gap: 20px;
  height: 100%; */
}

.sidebar{
    /* grid-area: 1/1/12/12; */
    /* height: 100px; */
    /* background: lime; */
}


.coulumn1{
    grid-area: 2/3/6/5;
    /* align-items: end; */
    /* align-content: end; */
    /* justify-content: end; */
    /* justify-items: end; */
    /* align-self: end; */
    /* justify-self: end; */
    background: white;
}
.coulumn2{
    grid-area: 2/5/6/7;
    background: #f91a69;
}

.round_big{
    order: 1;
    z-index: 1;
    grid-area: 2/5/4/7;
    -webkit-clip-path: circle(47.9% at 85% 11%);
    clip-path: circle(47.9% at 85% 11%);
    background: white;
    height: 100px;
}
.coulumn3{
    grid-area: 2/7/6/9;
    background: white;
}
.coulumn4{
    grid-area: 2/9/6/11;
    background: white;
}
.grid-small-box{
    grid-area: 2/3/6/5;
    height: 150px;
    width: 150px;
    background: #f91a69;
    -webkit-clip-path: circle(50.0% at 2% 2%);
clip-path: circle(50.0% at 2% 2%);
}

.heading{
    grid-area: 4/3/5/5;
    align-self: center;
    justify-self: center;
    margin: 10px;
    /* background: lime; */
}

.footer_circle{
    align-self: end;
    grid-area: 2/3/6/5;
    -webkit-clip-path: circle(35.8% at 100% 100%);
    clip-path: circle(35.8% at 100% 100%);
    height: 150px;
    background: lime;
}

.center_circle{
    height: 100px;
    grid-area: 4/5/6/6;
    /* align-items: center; */
    order: 1;
    z-index: 4;
    /* justify-self: center; */
    /* justify-content: center; */
    background-color: white;
    clip-path: circle(47px at 0px 48px);
    
}
.footer_circle_column{
    grid-area: 4/6/7/7;
    clip-path: circle(56px at 82px 137px);
    background: white;
}
.dim_circle{
    grid-area: 2/5/4/6;
    background: #fff9;
    clip-path: circle(18px at 53px 75px);
    /* height: 100px */
    /* background: lime; */
}