main {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        "step"
        "title"
        "product"
        "form";
}

main span#step {
    grid-area: step;
}

main h1 {
    grid-area: title;
}

main article {
    grid-area: product;
}

main form:last-of-type {
    grid-area: form;
    gap: 1rem 0;
}

@media (orientation: landscape) {
    main {
        grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
        grid-template-areas:
            "step step"
            "title title"
            "product form";
        grid-template-rows:
        auto
        auto
        min-content
        1fr;
        align-items: start;
    }

}

main article,
main form {
    border: var(--box-border);
    box-shadow: var(--gold-shadow);
    display: grid;
    border-radius: var(--box-radius);
    padding: var(--box-padding);
}

main article {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "list";
    gap: 0.75rem;
}

main article h2 {
    grid-area: title;
}
main article ul.warenkorb-kurz {
    grid-area: list;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
main article ul.warenkorb-kurz li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

main form#gutschein {
    grid-template-areas:
        "title"
        "input"
        "button";

    align-items: center;
    gap: 0 1rem;
}

main form#gutschein h2 {
    grid-area: title;
}
main form#gutschein label {
    grid-area: label;
    display: none;
}
main form#gutschein input {
    grid-area: input;
}
main form#checkout fieldset {
    border: var(--box-border);
    border-radius: var(--box-radius);
    display: grid;
    align-items: center;
    grid-template-columns: 30% 1fr;
    gap: 0.5rem 1rem;
    
}
main form#checkout fieldset legend {
    font: bold;
    font-size: 1.5rem;
}

main form#checkout fieldset > * {
    grid-column: 1 / 2;
}
main form#checkout fieldset > label,
main form#checkout fieldset > span {
    grid-column: 1 / 2;
    text-align: right;
}
main form#checkout fieldset > input,
main form#checkout fieldset > select,
main form#checkout fieldset > textarea,
main form#checkout fieldset > strong {
    grid-column: 2 / 3;
}
main form#checkout fieldset > input[type="checkbox"],
main form#checkout fieldset > input[type="radio"] {
    grid-column: 1 / 2;
    justify-self: right;
}
main form#checkout fieldset > input[type="checkbox"] + label,
main form#checkout fieldset > input[type="radio"] + label {
    grid-column: 2 / 3;
    text-align: left;
}
main form#checkout fieldset > button {
    grid-column: 1 / 3;
}