:root {
    color-scheme: light dark;
    --background-colour: light-dark(teal, #033);
    --border-colour: olive;
    --text-colour: light-dark(white, gray);
}

body {
    margin: 0 auto;
    width: 80%;
    color: var(--text-colour);
    background-color: var(--background-colour);
    font-family: system-ui;
}

header {
    margin: 1vh 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1vw;
}

.filter {
    display: flex;
    column-gap: 0.5vw;
}

.filter#price-filter {
    flex-wrap: wrap;
}

main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1vmax 1vmin;
}

bottle-card {
    border: 1px solid var(--border-colour);
}

bottle-card::part(image) {
    width: 80%;
    display: block;
    margin: 0 auto;
}

div.tagholder {
    display: flex;
    gap: 1vmin;
}

div.tagholder>p {
    padding: 0.5vmin;
    border: 2px solid var(--border-colour);
    border-radius: 1vmin;
}