body{

    margin:0;
    background:#111;
    font-family:Arial, Helvetica, sans-serif;

}

.homepage{

    width:90%;
    max-width:1600px;

    margin:auto;
    padding:50px;

    display:grid;

    gap:10px;

    grid-template-columns:

        220px
        90px
        1fr
        1fr
        1fr
        1fr;

    grid-template-rows:

        220px
        320px;

}
.photo{

    grid-column:1;
    grid-row:1;

}

.social{

    grid-column:2;
    grid-row:1;

}

.about{

    grid-column:1 / span 2;
    grid-row:2;

}

.recipes {

    grid-column:3;
    grid-row:1 / span 2;
    background-image:
        linear-gradient(
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.35)
        ),
        url("../images/recipes.jpg");

    background-size:cover;
    background-position:center;

}

.games{

    grid-column:4;
    grid-row:1 / span 2;

}

.blog{

    grid-column:5;
    grid-row:1 / span 2;

}

.audits{

    grid-column:6;
    grid-row:1 / span 2;

}
.card{

    background:#d9e7f4;

    border-radius:25px;

    overflow:hidden;

}
.photo img{

    width:100%;
    height:100%;

    object-fit:cover;

}
.about{

    padding:30px;

    display:flex;

    justify-content:center;

    flex-direction:column;

}
.panel {

    text-decoration:none;
    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:transform .3s ease;

    clip-path:polygon(
        12% 0,
        100% 0,
        88% 100%,
        0% 100%
    );

    background-size:cover;
    background-position:center;

}

.panel:hover{

    transform:

        rotate(2deg)
        scale(1.02);

}

.panel h2 {

    font-size:1.4rem;
    letter-spacing:1px;
    text-transform:uppercase;
    word-wrap:break-word;

    text-align:center;

    text-shadow:
        2px 2px 6px rgba(0,0,0,0.8);

}