index.css

*,::before,::after{
    box-sizing: border-box;
    /* color: blue; */
    text-align: center;
    background-color: bisque;
    /* color: black; */
}
.container{
    max-width: 500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    padding: 10px;
}
.img-div{
    grid-column: 1/4;
    grid-row: 1/3;
    display: flex;
    justify-content: center;
    
}
.img-div img{
    border-radius: 50%;
}
.intro{
    grid-column: 1/4;
    grid-row: span 3;
    padding: 5px;
}
.my-aside{
    grid-column: 1/4;
    grid-row: span 2;
    padding: 5px;
}
.goals-drop-down{
    grid-column: 1/4;
    grid-row: span 4;
    display: flex;
    flex-direction: column;
}
.yearly-goal{
   padding: 10px;
}
.first_year{
    margin-bottom: 5px;
}
.title-holder{
    display: flex;
    justify-content: space-between;
}
.open-close{
    padding: 5px;
}
.not-active{
    display: none;
}

@media screen and (min-width: 750px) {
    body{
        display: grid;
        place-content: center;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(50px, auto);
        padding: 10px;
        max-width: 1200px;
        gap: 20px;
        /* background-color: black; */
    }
    .img-div{
        grid-column: 1/4;
        grid-row: 1/3;
        display: flex;
        justify-content: center;
    }
    .intro{
        grid-column: 1/4;
        grid-row: span 3;
        padding: 5px;
    }
    .my-aside{
        grid-column: 4/7;
        grid-row: 1/3;
        padding: 5px;
    }
    .goals-drop-down{
        grid-column: 4/7;
        grid-row: 3/6;
        display: flex;
        flex-direction: column;
    }
}