.main {
    width:100%;
    padding:3.5em;
    border-bottom:1px solid #ccc;
}

h1,
.subtitle{
    font-size:3em;
    text-transform: uppercase;
    padding:1em;
    text-align: center;
    clear:both;
}

.subtitle {
    clear:both;
    font-size:2.4em;
    color:#b6ab77; /* gold*/
}

.categories {
    padding:1em 0 5em;
    text-align: center;
}

    .categories h4 {
        display:inline-block;
        float:none;
        margin:0;
        text-transform: uppercase;
        margin-right:1em;
        font-size:2.4em;
        color:#b6ab77; /* gold*/
    }

    .categories select {
        display:inline-block;
        float:none;
        border:1px solid #ccc;
        background-color:#fff;
        padding:1em;
        outline:0;
        width:300px;
        max-width:100%;
    }

    .categories option {
        padding:1em;
    }

.cars {
        display:grid;
        grid-template-columns:repeat(4,1fr);
        grid-gap:2em;
    }

.car {
    position:relative;
    padding-bottom:5em;
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}

    .car-title {
        width:100%;
        padding:1.5em 1.5em 0 1.5em;
    }
    
        .car-title h2 {
            color:#585858;
            margin-bottom:10px;
            font-size:1.4em;
            margin-bottom:0.5em;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        
        .car-title p {
            color:#666;
            font-size:1em;
            margin-bottom:0;
        }

    .car .hovercover {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:#333333dd;
        padding:2em;
        text-align:center;
        pointer-events: none;
        opacity:0;
        transition:opacity 0.25s ease-in-out;
    }

    .car img {
        max-width:100%;
        display:block;
        opacity:1;
        transition:opacity 0.5s ease-in-out;
    }

    .car img.hover-photo {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        opacity:0;
        transition:opacity 0.5s ease-out;
    }

        .car .hovercover p {
            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            font-size:1.6em;
            border:1px solid var(--gold);
            padding:0.25em 1em;
            color:var(--gold);
            text-transform: uppercase;
        }

        .car:hover .hovercover,
        .car:hover .hover-photo{
            opacity:1;
        }

        .car:nth-of-type(4n+1) {
            clear:left;
        }
    
    .car-price {
        width:100%;
        position:absolute;
        left:0;
        bottom:0;
        padding:1.6em;
        font-weight:bold;
    }
    
        .car-price p:first-child {
            font-size:1.6em;
            color:#b6ab77; /* gold*/
            float:left;
        }
        
        .car-price p:last-child {
            font-size:1.6em;
            color:#ccc;
            float:right;
        }

.pager-nav,
.pager-nav ul{
    float:left;
    Clear:left;
    width:100%;
    text-align: center;
    padding:0;
    margin:0;
}

.pager-nav {
    margin:5% 0;
}

    .pager-nav ul li {
        display:inline-block;
        color:#333;
        padding:0;
        margin:0;
    }
    
        .pager-nav ul li a {
            float:left;
            background-color:#fff;
            border:1px solid #aaa;
            padding:0.5em 1em;
            color:#585858;
            text-decoration: none;
            margin:0.5em;
            font-size:1.6em;
        }
        
            .pager-nav ul li a:hover,
            .pager-nav ul li.active a{
                background-color:#b6ab77; /* gold*/
            }
    
@media screen and (max-width:999px) {
    
    .main {
        padding:2.5%;
    }

     .cars {
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }
    
        .car {
            width:100%;
            margin:0;
        }

            .car > img {
                width:100%;
            }
}

@media screen and (max-width:669px) {
    .cars {
        grid-template-columns:repeat(2,1fr);
        grid-gap:1em;
    }

        .car {
            padding-bottom:7.5em;
        }

    .car-title {
        min-height:0;
        padding-bottom:0;
    }

    .car-price p,
    .car-price p:last-child {
        float:left;
        clear:left;
        text-align: left;
    }
}

@media screen and (max-width:449px) {
    .cars {
        grid-template-columns:repeat(1,1fr);
    }
}