.default {
    background-color:#fff;
    padding:2em;
}

.default h2 {
    color:var(--pink);
    font-size:2.5em;
    margin-top:1em;
}

.default h3 {
    color:var(--pink);
    font-size:2em;
    margin-top:1em;
}

.default table {
    border-collapse: collapse;
}

    .default td {
        border:1px solid #eee;
        padding:1em;
        font-size:1.2em;
    }

    .default td p {
        font-size:1em;
    }

p:last-of-type {
    margin-bottom:0;
}

.hero {
    padding:2em;
    margin-bottom:1em;
}

    .hero h1 {
        font-size:3.5em;
        font-weight:200;
        line-height:1;
        margin:0;
    }

.find {
    display:grid;
    grid-template-columns: 3fr 1fr;
    grid-gap:1em;
}

    .noresults {
        background-color:#fff;
        padding:2em;
    }

    .allcategories a {
        background-color:#fff;
        margin-bottom:2px;
        padding:2em;
        text-decoration: none;
        transition: all 0.25s ease-out;
    }

        .allcategories a p {
            float:left;
            font-size:1.8em;
            margin:0;
            line-height: 1;
            font-weight:300;
            transition: all 0.25s ease-out;
        }

        .allcategories a p.number {
            float:right;
            text-align: right;
            color:var(--pink);
            font-weight:bold;
        }

        .allcategories a:hover {
            background-color:var(--pink);
        }

        .allcategories a:hover p {
            color:#fff;
        }

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

        .results a {
            background-color:#fff;
            text-decoration: none;
            transition: all 0.25s ease-out;
        }

            .results a p {
                font-size:1.1em;
                padding:0.75em;
                line-height:1;
                transition: all 0.25s ease-out;
            }

            .results a img {
                width:100%;
            }

            .results a:hover {
                background-color:var(--pink);
            }

            .results a:hover p {
                color:#fff;
            }

aside div {
    float:left;
    clear:left;
    width:100%;
    margin-bottom:1em;
}

    aside .join {
        background-color:#eee;
        padding:2em;
    }

    aside .join .pink-btn {
        margin-top:1em;
    }

        aside .join .pink-btn:hover {
            background-color:#fff;
        }

    aside div:last-of-type {
        margin-bottom:0;
    }

@media screen and (max-width:1099px) {
    .find {
        grid-template-columns: 1fr 250px;
    }
}

@media screen and (max-width:999px) {
    .results {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width:799px) {
    .find {
        grid-template-columns: 1fr;
    }
}

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

    .hero h1 {
        font-size:3em;
    }

    .results {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:329px) {
    .results {
        grid-template-columns: 1fr;
    }
}