@layer components {
    .recipe {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-variant-numeric: tabular-nums;
    }

    .recipe__columns {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem 0;

        & > .recipe__steps {
            flex: 999 1 32rem;
            min-inline-size: 0;
        }

        & > .recipe__finished {
            flex: 1 1 20rem;
            min-inline-size: 0;
        }
    }

    @media print {
        .recipe__warnings {
            display: none;
        }

        .recipe__columns > .recipe__finished {
            order: -1;
        }
    }
}