style.css

body {
    background: hsl( 0, 0%, 97% );
    font-family: 'Rubik', sans-serif;
}

@media screen and (min-width: 760px) {
    body {
        margin-top: 50px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(100px auto);
        gap: 10px;
        max-width: 1380px;
        margin: 0 auto;
        grid-template-areas: 
            "about skills skills skills"
            "about skills skills skills"
            "education education employment employment"
            "education education . .";
    }

    .skillImages {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        padding: 8px;
    }
    
}

.grid-container > * {
    background: lightblue;
    padding: 30px;
    text-align: center;
}

.grid-item {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.grid-item:hover{
    box-shadow: -1px 10px 29px 0px rgba(0,0,0,0.8);
  }

.skillImages > div {
    margin: 4px;
}

.skillImages > img {
    text-align: center;
}

.about {
    grid-area: about;
    background: rgb(228, 152, 135);
    font-weight: light;
    font-size: 20px;
}

.skills {
    grid-area: skills;
    background: paleturquoise;
    display: grid;
}

.education {
    grid-area: education;
    background: rgb(86, 216, 209);
}

.employment {
    grid-area: employment;
    background: rgb(137, 159, 255);
}

.card {
    background: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    padding: 5%;
    margin: 2%;
}

.card:hover{
    box-shadow: -1px 10px 29px 0px rgba(0,0,0,0.8);
  }

.card > p {
    margin: 2%;
}

.card > h1 {
    margin: 5%;
}