@import url("theme.css");

.search {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0 1em .5em 1em;
    min-height: 100vh;
    height: 100%;
    border-top: .55px var(--card) solid;
}

.search aside {
    max-width: 300px;
    width: 100%;
    min-height: 100%;
    border-right: .55px var(--card) solid;
    padding: 1.5em 1.5em 1em 0;
    margin-right: 1em;
}

.search main {
    width: auto;
    min-width: 1100px;
    padding: 1em 0;
}

.searchbar {
    max-width: 1200px;
    margin: auto auto 1.2em;
}

.searchbar, .searchbar input {
    background: var(--card);
}

.filter {
    margin-bottom: 1em;
    width: 100%;
}

.filter input:not([type=radio]) {
    width: 100%;
}

.filter .subtitle {
    margin-bottom: .2em !important;
}

.select, .select select {
    width: 100%;
}

.header-section {
    margin-top: 2em !important;
}

.grid, .header-section {
    max-width: 1200px;
    margin: auto auto 2em;
}

.grid {
    display: grid;
    align-items: start;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.grid.large {
    max-width: 100%;
    width: 100%;
}

@media (max-width: 1200px) {
    .card {
        min-width: 250px;
        max-width: 300px;
    }

    .card img {
        height: 130px;
    }

    .grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .search main {
        width: 75%;
        min-width: unset;
    }
}