.flip-container {
    width: 13.6%;
    margin: 1px;
}
.flip-container, .front, .back {
    height: 75px;
}

@media only screen and (min-width: 500px) {
    aside {
        font-size: inherit;
    }
    .flip-container, .front, .back {
        height: 100px;
    }
}

@media only screen and (min-width: 700px) {
    body {
        font-size: large;
    }
    h1 {
        max-width: none;
    }
    .front:hover {
        background-color: white;
    }
    .flip-container {
        width: 13.8%;
    }
    .flip-container, .front, .back {
        height: 140px;
    }

}

@media only screen and (min-width: 992px) {
    h1 {
        font-size: x-large;
    }
    header {
        width: 50%;
    }
    
    .flip-container {
        width: 14%;
    }
    .flip-container, .front, .back {
        height: 190px;
    }
    a {
        max-width: 300px;
    }
}

@media only screen and (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }
    .flip-container {
        width: 8%;
        margin: 5px;
    }
    .flip-container, .front, .back {
        height: 140px;
    }
    a {
        max-width: 300px;
    }
}