.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 1rem auto;
}


div.cards__header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 960px;
    margin: 0 auto;
}

div.cards__header h1 {
    width: 33.3333%;
}


.cards .threed {
    width: 25%;
    height: auto;
    margin: 1rem;
    transition: all 0.25s ease-in-out;
    border-radius: .75rem;
}


.cards .threed:hover {
    transform: scale(1.03125);
    filter: brightness(1.0625);
    cursor: pointer;
}


.cards .threed:active {
    transform: scale(0.96875);
    filter: brightness(0.625);
}

main section.cards {
    flex-flow: row wrap;
}