.events-page {
    --p-color: var(--cl-accent);
    --k-color: green;
    --s-color: rebeccapurple; 
}

.filters {
    .content{
        display: flex;
        gap: 1em;

        p{
            font-family: "Noto Sans", sans-serif;
            font-size: 16px;
            font-weight: 400;
        }
    }
}

.grid-container {
    margin: 3em 1em 8em;
    display: grid;
    gap: 1em;
    grid-template-columns: auto auto auto;
}

.filter-wrapper{
    display: flex;
    align-items: center;
}

@media only screen and (width < 800px) {
    .filter-wrapper {
        flex-direction: column;
        align-items: start;
    }

    .grid-container {
        grid-template-columns: auto;
    }

    .filters{
        .content{
            flex-direction: column;

            p{
                margin-bottom: 0em;
            }
        }
    }
}

.card {
    flex: 1;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.2), 0 6px 20px 0 rgba(160, 160, 160, 0.2);
    background-color: var(--cl-secondary);
    width: 310px;
    min-width: 30%;
    overflow: hidden;

    padding: 1em;
    display: flex;
    flex-direction: column;

    text-align: left;

    h3{
        margin: 1em 0em 0em;
    }

    p {
        margin: 0;
    }

    .tags{
        display: flex;
        align-items: end;
        margin-top: 20px;
        flex: 1;
        gap: 0.5em;
    }
    
    a.tag {
        background-color: var(--cl-secondary);
        padding: .5em .8em;
        margin-top: .5em;
        font-size: 14px;
    }
    
    a.preschool {
        color: var(--p-color);
        border: 1px solid var(--p-color);
    }
    
    a.kindergarten {
        color: var(--k-color);
        border: 1px solid var(--k-color);
    }
    
    a.summer-stem {
        color: var(--s-color);
        border: 1px solid var(--s-color);
    }
}


/* .filter-wrapper {
    margin-top: 3em;
} */


/* Hide the browser's default checkbox */
.filter input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 3px;
    left: 3px;
    height: 16px;
    width: 16px;
    background-color: var(--bk-primary);
    border: 1px solid black;
    border-radius: 4px;
}

.filter{
    margin: 1em 2em 1em 0em;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;

    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

.filter{
    &.preschool-filter{
        color: var(--p-color);
        .checkmark{
            border: 1px solid var(--p-color);
        }
    }

    &.kindergarten-filter{
        color: var(--k-color);
        .checkmark{
            border: 1px solid var(--k-color);
        }
    }

    &.stem-filter{
        color: var(--s-color);
        .checkmark{
            border: 1px solid var(--s-color);
        }
    }
}

/* On mouse-over, add a grey background color */
.filter:hover input ~ .checkmark {
    background-color: #ccc;
}

.filter.preschool-filter input:checked ~ .checkmark {
    background-color: var(--p-color);
}

.filter.kindergarten-filter input:checked ~ .checkmark {
    background-color: var(--k-color);
}

.filter.stem-filter input:checked ~ .checkmark {
    background-color: var(--s-color);
}