body {
    background-color: whitesmoke;
    font-family: 'Poppins';
}

.Headliners {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 0% 25%;
}

.MainHeadline {
    font-weight: 200;
}

.SecondHeadline {
    font-weight: 600;
}

.Headliners h1, .Headliners p {
    margin: 0% 25%;
}

.Headliners p {
    margin: 5% 0%;
}

.BoxesContainer {
    display: grid;
    width: 100%;
    justify-content: center;
    
grid-template-columns: 25% 25% 25%;
grid-template-rows: 250px 500px;
gap: 5%;
}

.Supervisor, .Teambuilder, .Karma, .Calculator {
display: flex;
flex-direction: column;
justify-content: space-between;

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
width: 100%;

}

.Supervisor, .Karma, .Calculator {
    height: 50%;
}

.Supervisor h3, .Teambuilder h3, .Karma h3, .Calculator h3 {
    margin-bottom: 0%;
}


.Supervisor {
    border-top: hsl(180, 62%, 55%) 3px solid;
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
}

.Teambuilder {
    border-top: hsl(0, 78%, 62%) 3px solid;
    grid-column: 2;
    justify-self: center;
}
.Karma {
    border-top: hsl(34, 97%, 64%) 3px solid;
    grid-column: 2;
    grid-row: 2;
    margin-top: 15%;
}
.Calculator{
    border-top: hsl(212, 86%, 64%) 3px solid;
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
}



.Title {
    margin: 5% 5%;
}

.Description {
    margin: 0% 5%;
    color: hsl(229, 6%, 66%)
}

.Icon {
width: 15%;
align-self: flex-end;
margin-right: 1em;
margin-bottom: 1em;
}

@media only screen and (max-width: 375px) {

    .MainHeadline {
        display: flex;
        flex-wrap: wrap;
        font-weight: 200;
        text-align: center;
        
    }
    
    .SecondHeadline {
        display: flex;
        flex-wrap: wrap;
        font-weight: 600;
        text-align: center;
    }
    
    .Headliners h1, .Headliners p {
        display: flex;
        flex-wrap: wrap;
        margin: 0% auto;
        text-align: center;
        margin-bottom: 10px;
    }

    .BoxesContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        row-gap: 30px;
    }

    .Karma {
        margin-top: 0%;
    }
        
}