:root {
    --card-width: 24rem;
    --accent: #52368f;
}

.card {
    border: 1px solid var(--main-fg);
    color: var(--main-fg);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    padding: var(--wide);
    border-radius: var(--border-radius);
    width: var(--card-width);
}

.card--link:hover {
    background-color: var(--main-fg);
    color: var(--main-bg);
}

.card__image {
    width: calc(var(--card-width) - (2 * var(--wide)));
    height: calc(var(--card-width) - (2 * var(--wide)));
}

.main-menu {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    row-gap: var(--wide);
    flex-wrap: wrap;
    column-gap: var(--wide);
    justify-content: space-evenly;
}

.main-menu__header {
    width: 100%;
}

.main-menu__title {
    padding: var(--wide); 
    margin: 0;
    text-align: center;
}

.main-menu__filters {
    grid-template-columns: repeat(auto-fit, minmax(6rem, min-content));
    display: grid;
    justify-content: center;
    column-gap: var(--narrow);
    row-gap: var(--narrow);
    grid-auto-rows: 1fr;
    padding: 0 var(--wide);
}

input {
    accent-color: gold;
}

.form__label {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: center;
    padding: var(--narrow);
    background: var(--main-fg);
    color: var(--main-bg);
    column-gap: var(--narrow);
    border-radius: var(--border-radius);
}

.main-menu__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, 24rem);
    column-gap: var(--wide);
    row-gap: var(--wide);
    flex-grow: 2;
    justify-content: center;
    grid-auto-rows: 1fr;
}