@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    * {
        box-sizing:border-box;

    }
    html, body {
        font-family: 'Poppins', sans-serif;
        font-size:15px;
        height:100%;
        background-color:#FAFAFA;
}
p {
    line-height:1.6rem;
    font-size:1rem;
    color:#4C4E61;
    font-weight:300;
}
header {
    text-align:center;
}
#grid-home {
    background-color:#FAFAFA;
    margin: 6em 1.7em;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows:1fr 3.9fr;
}


header h1{
    margin-top:0.49rem;
    color: #4C4E61;
    font-size:1.7rem;
    font-weight:700;
}
header h2 {
    margin:0;
    color: #A3A5AE;
    font-size:1.7rem;
    font-weight:300;
} 






main {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 1.1fr 0.5fr;
    gap:1.6rem;
}


.cards {
    border-radius:10px;
    padding:1rem 1.8rem;
    box-shadow:0px 12px 37px -15px #969690;
    display:flex;
    flex-direction:column;
    height:15rem;
}
.cards h3 {
    font-size:1.5rem;
    color:#4C4E61;
    margin-bottom:0.5rem;
    margin-top:1rem;
}
.cards p{
    color:#A3A5AE;
    font-size:0.9rem;
    margin-top:0;
    margin-bottom:2rem;
}
#icon-supervisor {
    border-top:0.29rem solid #45D3D3;
    background: url("../images/icon-supervisor.svg") no-repeat bottom 2rem right 2rem;

}
#icon-team {
    background: url("../images/icon-team-builder.svg") no-repeat bottom 2rem right 2rem;
    border-top:0.29rem solid #EA5353;
}
#icon-karma {
    background: url("../images/icon-karma.svg") no-repeat bottom 2rem right 2rem;
    border-top:0.29rem solid #FCAF4A;
}
#icon-calculator {
    background: url("../images/icon-calculator.svg") no-repeat bottom 2rem right 2rem;
    border-top:0.29rem solid #549EF2;
}
img {
    align-self:flex-end;
    margin-bottom:1em;
}

#gradeGrade {
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
    display:grid;
    gap:1.6rem;
}
@media (min-width:600px) {
    main {
        grid-template-columns:1fr 1fr;
        grid-template-rows: 1fr;
    }
    #icon-calculator {
        grid-column:1;
        grid-row:1;
    }
    #icon-supervisor {
        grid-column:1;
        grid-row:1;
        margin-top:16.499rem;
    }
    #grid-home {
        gap:2rem;
    }
    #gradeGrade {
        padding-bottom:7rem;
    }
}
@media (min-width:886px) {
    main {
        grid-template-columns:1fr 1fr;
        grid-template-rows: 1fr;
    }
    #icon-calculator {
        grid-column:1;
        grid-row:1;
    }
    #icon-supervisor {
        grid-column:1;
        grid-row:1;
        margin-top:16.499rem;
    }
 

}
@media (min-width:1000px) {
    #grid-home {
        padding:6rem 7rem 0rem 7rem;
        margin:0;
        gap:1rem;
        grid-template-rows: 1fr 3fr;
    }
    header {
        justify-self:center;
        width:36rem;
    }
    header h1, header h2 {
        font-size:2.5rem;
    }

    main {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows:0.5fr;
    }
    #icon-supervisor, #icon-calculator {
        margin-top:10rem;
    }
    #icon-supervisor {
        grid-column:3;
        grid-row:1;
    }
   .cards {
       height:16.5rem;
   }
    .cards p {
        font-size:1rem;
        margin-bottom:1.5rem;

    }
   #gradeGrade {
       display:flex;
       flex-direction:column;
       justify-content:center;
   }
   img {
    margin-top: 1.5rem;
    margin-right:0.3rem;
   }


}