:root {
    --bg: #CEE7E6;
    --bg2: #BFC0C0;
    --txt: #648767;
    --txt2: #7DC95E;
    --lnk: #7CDF64;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 16px * 62.5% = 10px */
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem; /* 10px * 1.6 = 16px */
    background-color: var(--bg);
    color: var(--txt);
}

h3 {
    margin: 0;
    padding: 1rem;
}

main {
    display:flex;
    flex-flow: row wrap;
    gap: 1%;
}

main h2 {
    width: 100%;
}

.carlist {
    flex-basis: 70%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 1rem;
}

.carmenu {
    flex-basis: 28%;
}

.card {
    width: 100%;
    height: 20rem;
    background-color: var(--bg2);
    padding: 1rem;
    border-radius: .5rem;
    justify-content: center;
    perspective: 100rem;
}

.card .inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.2s;
    transform-style: preserve-3d;
}

/* horizontal flip */
.card:hover .inner {
    transform: rotateY(180deg);
}
  
.card .front, .card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.card .front {
    background-color: var(--bg);
    color: var(--txt);
}

/* Style the back side */
.card .back {
    background-color: var(--txt);
    color: var(--bg);
    transform: rotateY(180deg);
}



@media (min-width: 1200px) {
    .card {
        width: 24%;
    }
}