.top {
    padding: 0;
    display: grid;
    grid-template-columns: 4fr 2fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        "name profile-img"
        "status profile-img";
}

.top:last-child {
    margin-bottom: 2rem;
}

.name, .status {
    padding: 0 20px;
    margin: 0;
    text-align: center;
}

.name {
    font-size: xx-large;
    font-weight: 300;
    padding-top: 10px;
    grid-area: name;
}

.status {
    font-size: x-large;
    font-weight: 200;
    padding-bottom: 10px;
    grid-area: status;
}

.profile-img-container {
    display: flex;
    grid-area: profile-img;
    align-items: center;
}

.profile-img {
    height: 94px;
    width: 94px;
    border-radius: 24px;
}

.top .first {
    background-image: linear-gradient(to left bottom, #32c5ff, #00b4ff, #00a1ff, #4389ff, #7a6bff, #ba54e7, #e435c7, #ff00a1, #ff2e75, #ff614d, #ff8e26, #f7b500);
}

.top .second {
    background-image: linear-gradient(45deg, rgba(121, 194, 243, 1) 22.6%, rgba(255, 180, 239, 1) 67.7%);
}

.description {
    font-weight: 300;
    font-size: larger;
    letter-spacing: .05rem;
}
