body {
    --viewport-margin: var(--size-s);
    --row-gap: var(--size-m);
    --column-gap: var(--size-xs);
    --grid-template-columns: repeat(12, 1fr);
    --border: calc(var(--size-xs) / 10) solid var(--foreground);
}

.grid--content-aligned--left--narrow,
.grid--content-aligned--right--narrow,
.grid--content-aligned--center,
.grid--content-aligned--center-with-aside {
    display: flex;
    margin: 0 var(--viewport-margin);
}

.comp--header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "logo cta cta";
    padding: 0 var(--viewport-margin);
}


.comp--header .logo,
.comp--header .cta {
    font-size: var(--text-l);
    line-height: var(--size-3xl);
    text-transform: uppercase;
    white-space: nowrap;
}

.comp--header .logo {
    grid-area: logo;
}

.container--form {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--size-2xs);
}

input {
    padding: var(--size-xs) var(--size-xs);
    border: var(--border);
    border-radius: var(--size-2xs);
    background-color: var(--background);
    color: var(--foreground);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: var(--size-xs) var(--size-xs);
    border: var(--border);
    border-radius: var(--size-2xs);
    background-color: var(--background);
    color: var(--foreground);
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-wrapper select {
    width: 100%;
    padding-right: 2em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-wrapper .select-arrow {
    position: absolute;
    right: var(--size-xs);
    top: 50%;
    transform: translateY(-50%);
    width: var(--size-s);
    font-size: var(--text-m);
    color: var(--foreground);
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    z-index: 2;
    user-select: none;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
    pointer-events: none;
}

.select-wrapper .select-arrow:hover {
    color: var(--accent, #0070f3);
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.number-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.number-wrapper input[type="number"] {
    width: 100%;
    padding-right: 2em;
    border: var(--border);
    border-radius: var(--size-2xs);
    background-color: var(--background);
    color: var(--foreground);
}

.number-wrapper .arrow-up,
.number-wrapper .arrow-down {
    position: absolute;
    right: var(--size-xs);
    width: var(--size-s);
    font-size: var(--text-m);
    color: var(--foreground);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 2;
    user-select: none;
    text-align: center;
    transition: color 0.2s;
}

.number-wrapper .arrow-up {
    top: 60%;
    transform: translateY(-90%);
}

.number-wrapper .arrow-down {
    top: 40%;
    transform: translateY(0%);
}

.number-wrapper .arrow-up:hover,
.number-wrapper .arrow-down:hover {
    color: var(--accent, #0070f3);
}

input[type="color"] {
    width: var(--size-l);
    height: var(--size-l);
}

a.button,
button {
    padding: var(--size-xs) var(--size-xs);
    border: var(--border);
    border-radius: var(--size-2xs);
    background-color: var(--background);
    color: var(--foreground);
    cursor: pointer;
    width: auto;
}
a.button:hover,
button:hover {
    background-color: var(--foreground);
    color: var(--background);
    text-decoration: none;
}

@media (min-width: 900px) {
    body {
        --viewport-margin: var(--size-2xl);
        --row-gap: var(--size-l);
    }
    .grid--content-aligned--left--narrow {
        display: grid;
        grid-template-columns: var(--grid-template-columns);
        grid-template-areas: "main main main main main main main main main main aside aside";
        grid-column-gap: var(--column-gap);
        grid-row-gap: var(--row-gap);
    }
    
    .grid--content-aligned--right--narrow {
        display: grid;
        grid-template-columns: var(--grid-template-columns);
        grid-template-areas: "aside aside main main main main main main main main main main";
        grid-column-gap: var(--column-gap);
        grid-row-gap: var(--row-gap);
    }

    .grid--content-aligned--center-with-aside {
        display: grid;
        grid-template-columns: var(--grid-template-columns);
        grid-template-areas: "aside aside main main main main main main main main aside aside";
        grid-column-gap: var(--column-gap);
        grid-row-gap: var(--row-gap);
    }

    .grid--content-aligned--center {
        display: grid;
        grid-template-columns: var(--grid-template-columns);
        grid-template-areas: "main main main main main main main main main main main main";
        grid-column-gap: var(--column-gap);
        grid-row-gap: var(--row-gap);
    }

    .wrapper--content {
        grid-area: main;
    }

    form {
        max-width: 40vw;
    }
}