.filter-page {
    display: flex;
    gap: var(--pico-spacing);
}

.img {
    background-size: cover;
    background-position: center;
}

.filtered-content .img {
    height: 200px;
    width: 400px;
    min-width: 300px;
    max-width: 400px;
}

.filtered-content {
    display: flex;
    gap: var(--pico-typography-spacing-vertical);
}

.filter-page .results {
    /* width: 85%; In case we wanna add filters in the future */
    width: 100%;
}

.results {
    display: flex;
    flex-direction: column;
    gap: var(--pico-spacing);
}

.filters {
    padding-left: calc(var(--pico-spacing)/2);
    width: 15%;
    border-left: 0px solid var(--pico-color-2);
}

@media (max-width: 1280px) {
    .filtered-content .img {
        width: 400px;

        height: 300px;
    }
}

@media (max-width: 768px) {
    .filtered-content {
        flex-direction: column;
    }

    .filtered-content .img {
        width: 100%;
        max-width: inherit;
    }

}