html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #202528;
    color: white;
    display: grid;
    place-content: center;
    height: 100vh;
    font-family: 'Nunito', sans-serif;
}

.card {
    padding: 1em;
    margin: 0 1em;
    background: #313A40;
    border-radius: .5em;
    position: relative;

}

span {
    width: 5em;
    height: 5em;
    background: white url("https://github.com/ajay-dhangar.png") no-repeat center center / cover;
    position: absolute;
    top: -2.5em;
    border-radius: 50%;
    border: 5px solid #202528;
}

h1 {
    margin-top: 1.2em;
}

p {
    line-height: 1.4em;
    color: #8FA4B2;
}

a {
    text-decoration: none;
    color: #4AA4DF;
    display: block;
    text-align: center;
    padding: .8em 1em;
    border: 1px solid #4AA4DF;
    border-radius: .5em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .85rem;
    margin-top: 2em;
}

@media (min-width: 500px) {
    .card {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-areas: 
            "avatar content";
        margin: 0 4em;
        padding-right: 2em;
        padding-bottom: 2em;
    }
    span {
        position: initial;
        display: block;
        grid-area: avatar;
        margin-left: -3.8em;
        margin-top: .8em;
    }
    .card-details {
        grid-area: content;
        margin-left: 1.5em;
    }
    a {
        display: inline-block;
    }
    
}

@media (min-width: 1000px) {
    .card-details {
        display: grid;
        grid-template-columns: repeat(2,auto);
        grid-template-areas: 
            "name description"
            "cta description";
    }
    
    h1 {
        grid-area: name;
    }
    p {
        grid-area: description;
        margin-left: 2em;
        margin-top: 2.5em;
    }
    a {
        grid-area: cta;
        padding: .5em;
        width: 60%;
        font-size: .7em;
        margin-top: 0;
    }
    
}


/* For the width display, ignore this */

.width-container {
    display: none;
}

.display-width {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #E6E6E6;
    padding: .3em;
    font-size: .85em;
    color: black;
}

let width = document.getElementById('width');
var onresize = function() {
   //your code here
   //this is just an example
   width.innerText = document.body.clientWidth;
   width.classList.add('display-width');
   setTimeout(() => {
       width.classList.remove('display-width');
   }, 2000)
}
window.addEventListener("resize", onresize);