*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 80%;
    /* height: 120vh; */
    margin: auto;
    
}

body .main{
    /* background-color: lightblue; */
    width: 100%;
    height: 100%;
    margin: 10px;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    border-radius: 10px;
}

.main .box{
    background-color: rgb(88, 176, 243);
    border-radius: 10px;
    padding: 30px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 200ms;
}

.box:hover{
    transform: scale(1.05);
    border: solid 1px rgb(193, 190, 190);
}


img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 20px 20px 0;
    object-fit: cover;
}

.box_1{
    grid-column: 1 / 5;
}

.box_2{
    grid-column: 5 / -1;
}

.box_3{
    grid-column: 1 / 5;
    grid-row: 2 / 4;
}

.box_4{
    grid-column: 5 / 7;
    grid-row: 2 / 4;
}

.box_5{
    grid-column: 7 / -1;
    grid-row: 2 / 4;
}

.box_6{
    grid-column: 1 / 4;
}

.box_7{
    grid-column: 4 / 7;
}

.box_8{
    grid-column: 7 / -1;
}


.box .inner{
    display: flex;
    width: 100%;
    height: 100%;
}

.inner p{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 20px;
    letter-spacing: -.5px;
}

.inner h1, .inst{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.inst{
    padding: 20px 10px;
    font-size: 2.4rem;
}

a{
    color: black;
    text-decoration: none;
}

.box:last-child .inner, .box:nth-child(4) .inner, .box:nth-child(5) .inner, .box:nth-child(3) .inner, .box:nth-child(7) .inner, .box:nth-child(6) .inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.box:nth-child(4) .inner, .box:nth-child(5) .inner, .box:nth-child(3) .inner, .box:nth-child(7) .inner {
    padding: 0px !important;
}



@media only screen and (max-width: 1100px) {
    .main {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(5, 1fr) !important;
    }

    .box_1{
        grid-column: 1 / 2;
        
    }
    
    .box_2{
        grid-column: 2 / -1;
    }
    
    .box_3{
        grid-column: 1 / -1;
        grid-row: 2 / 3;
    }
    
    .box_4{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    
    .box_5{
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    
    .box_6{
        grid-column: 1 / -1;
    }
    
    .box_7{
        grid-column: 1 / 2;
    }
    
    .box_8{
        grid-column: 2 / -1;
    }

    .box .inner{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media only screen and (max-width: 980px) {
    .main{
        display: block !important;
    }

    .box{
        width: 100%;
        margin: 10px 0;
        padding: 30px !important;

    }
}