.biogas-panel {
    --biogas-panel-gap: var(--spacing-lg);
    --biogas-panel-spacing: 5px;
    --biogas-panel-input-spacing-vertical: var(--spacing-lg);
    --biogas-panel-area-selector-spacing-vertical: var(--spacing-lg);
    --biogas-panel-area-selector-gap: var(--spacing-md);
    --biogas-panel-promo-input-spacing-vertical: var(--spacing-sm);

    display: grid;
    padding: var(--biogas-panel-spacing);

    @media (min-width: 1024px) {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--biogas-panel-gap);
    }

    @media (min-width: 1380px) {
        grid-template-columns: auto auto 1fr auto;
        align-items: center;
    }

    > p {
        text-align: center;
        margin-top: 0;
    }

    .text-input {
        margin-bottom: var(--biogas-panel-input-spacing-vertical);
        order: 1;

        @media (min-width: 1024px) {
            margin-bottom: 0;
        }

        @media (min-width: 1380px) {
            max-width: 245px;
            order: unset;
        }

        @media (min-width: 1500px) {
            margin-right: 50px;
        }
    }

    .consumption-display {
        order: 3;

        @media (min-width: 1380px) {
            order: unset;
            max-width: 180px;
        }

        @media (min-width: 1500px) {
            max-width: 280px;
        }
    }

    .area-selector {
        margin-bottom: var(--biogas-panel-area-selector-spacing-vertical);
        order: 2;

        @media (min-width: 1024px) {
            display: flex;
            align-items: center;
            gap: var(--biogas-panel-area-selector-gap);
            justify-content: center;
            margin-bottom: 0;
        }

        @media (min-width: 1380px) {
            order: unset;
        }
    }

    .selector-option {
        @media (min-width: 1024px) {
            --selector-option-min-width: 70px;
        }
    }

    .btn {
        order: 5;

        @media (min-width: 1024px) {
            justify-self: start;
            margin: 0;
        }

        @media (min-width: 1380px) {
            white-space: nowrap;
            order: unset;
        }
    }

    .promo-code {
        order: 4;

        @media (min-width: 1380px) {
            order: unset;
        }

        .text-input {
            margin-bottom: var(--biogas-panel-promo-input-spacing-vertical);

            @media (min-width: 1380px) {
                margin-right: 0;
            }
        }
    }

    .promo-code,
    .btn,
    p,
    h1, h2, h3, h4, h5, h6 {
        @media (min-width: 1024px) {
            grid-column: 1 / -1;
        }

        @media (min-width: 1380px) {
            grid-column: auto;
        }
    }

    .promo-code,
    p,
    h1, h2, h3, h4, h5, h6 {
        @media (min-width: 1380px) {
            grid-column: 1 / -1;
        }
    }
}