*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid black;
}

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.content_wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.profile{
    width: 3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

header{
    display: flex;
    justify-content: flex-end;
    padding: .4rem;

    button{
        background-color: lightgreen;
        padding: .8rem 1rem;
    }
}

main{
    flex: 1;
    display: flex;

    .main-left{
        flex: 1;
        
        .wrapper{
            padding: 1rem;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 2fr 1fr 3fr;
            gap: 1rem;
            
            .cell{
                &:nth-child(1){
                    grid-row: 1/3;
                }
                
                &:nth-child(4){
                    grid-row: 2/4;
                }
            }
        }
    }

    .main-right{
        flex: 1;
        display: flex;
        
        .main-right-container{
            flex: 1;
            padding: 1rem;
            
            .wrapper{
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                .card{
                    width: 40%;
                    height: 30%;
                    display: flex;
                    flex-direction: column;

                    .cover{
                        flex: 3;
                        
                        span{
                            float: right;
                            margin: .4rem;
                        }
                    }

                    .content{
                        flex: 1;
                        display: flex;
                        padding: .4rem;

                        .content-left{
                            flex: 1;
                            border: none;

                            h2, p{
                                border: none;
                            }
                        }
                        
                        .action-button{
                            border: none;
                            height: 100%;
                            aspect-ratio: 1/1;
                            border-radius: 2px;
                            background-color: lightgreen;
                        }
                    }
                }
            }
        }

        aside{
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: .4rem;
            padding: .4rem;
        }
    }
}

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem;

    .profile_wrapper{
        display: flex;
        align-items: center;
    }
}