* {
    box-sizing: border-box;
    font-size: 15px;
}

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

h1, h2, h3 {
    text-align: center;
}

h1 {
    color: hsl(234, 12%, 34%);
    font-size: 2.3rem;
    font-weight: 600;
}

h2 {
    color: hsl(229, 6%, 66%);
    font-size: 2.3rem;
    font-weight: 200;
}

h3, p {
    color: hsl(229, 6%, 66%);
    font-weight: 200;
}

header { margin: 0 auto; max-width: 500px; }
header h1 { margin-bottom: 0; margin-top: 0; }
header h2 { margin-bottom: 0 }
header h3 { margin-bottom: 0 }

.container {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    margin-top: 2.8rem;
    max-width: 1250px;
}

.boxes {
	align-items: center;
	align-content: space-between;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
    justify-content: center;
}

.box {
    background: white;
    border-radius: .3rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    height: 200px;
    margin: 0 1rem;
    max-width: 320px;
    padding: 1.5rem;
    position: relative;
}

.box ~ .box {
    margin-top: 2rem;
}

.box.red {
    border-top: 3px solid hsl(0, 78%, 62%);
}

.box.cyan {
    border-top: 3px solid hsl(180, 62%, 55%);
}

.box.orange {
    border-top: 3px solid hsl(34, 97%, 64%);
}

.box.blue {
    border-top: 3px solid hsl(212, 86%, 64%);
}

.box h4 {
    color: hsl(234, 12%, 34%);
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.box p {
    color: hsl(234, 12%, 34%);
    font-size: .9rem;
    margin-top: 0;
}

.box img {
    bottom: 1.8rem;
    display: block;
    margin-left: auto;
    position: absolute;
    right: 1.8rem;
}

.mb-3 {
    margin-bottom: 2rem;
}

.attribution { color: hsl(234, 12%, 34%); font-size: 11px; text-align: center; margin-top: 3rem; }
.attribution a { color: hsl(228, 45%, 44%); }

@media (max-width: 1024px){
    .boxes {
        align-items: baseline;
        align-content: space-between;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box {
        margin-bottom: 2rem;  
    }

    .box ~ .box {
        margin-top: 0;
    }

    .center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mb-3 {
        margin-bottom: 0;  
    }
}