.header {
    grid-area: header;
}

.image {
    grid-area: image;
}

.p1 {
    grid-area: p1;
}

.p2 {
    grid-area: p2;
}

.p3 {
    grid-area: p3;
}

.p4 {
    grid-area: p4;
}

.footer {
    grid-area: footer;
}

.grid-container {
    display: grid;
    grid-template-areas:
        'header header header header'
        'image image image image'
        'p1 p2 p3 p4'
        'footer footer footer footer';
    gap: 1px;
    /* background-color: #2196F3; */
    background-color: black;
    padding: 1px;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto 50% auto auto;
}

.grid-container>div {
    background-color: white;
    text-align: center;
    padding: 20px 0px;
    font-size: 25px;
}

/* .grid-container div div {
    background-color: white;
    text-align: center;
    padding: 20px 0px;
    font-size: 30px;
}
background-color: transparent; */