body{
    background-color: rgb(240, 247, 255);
    margin: 2% 25% 0 25%;
    color: white;
}

.flex-container{
    display: flex;
    background-color: #cee5f6;
    border: solid 15px #cee5f6;
    border-radius: 10px;
    justify-content: space-around;
}

.info {
    background-color: #8bc3ed;
    color: white;
    width: 14%;
    border: 10px solid #8bc3ed;
    border-radius: 7px;
    text-align: center;
}

.grid-container {
    display: grid;
    background-color: #cee5f6;
    border-radius: 10px;
    border: solid 20px #cee5f6;
    gap: 15px 5px;
    grid-template-areas: "header header header header" 
    "main main main side-bar"  "main main main side-bar"
    "main main main side-bar"  "main main main side-bar" 
    "footer footer footer footer";
}

.info1 {
    background-color: #8bc3ed;
    border-radius: 10px;
    text-align: center;
    padding: 5px 25px 5px 25px;
}

.header {
    grid-area: header;
    height: 100px;
}

.main {
    grid-area: main;
    height: 600px;
}

.side-bar {
    grid-area: side-bar;
    height: 600px;
}

.footer{
    grid-area: footer;
    height: 100px;
}

figure{
    display: flex;
    gap: 4%;

}

figcaption{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7%;
}