:root {
    /*! @media doesn't support variables, grr */
    /* --min-width: 45ch; */

    --border-radius-card: 24px;
    --border-radius-img: 12px;
    --border-radius-callout: 12px;
}

main {
    display: grid;
    place-content: center;
}

article {
    outline: orange 10px solid;

    padding: 0px 32px;

    @media (min-width: 50ch) {
        outline: purple 10px solid;
        max-width: 46rem;

        padding: 40px;

        border-radius: var(--border-radius-card);
    }
}

article > * + * {
    margin-top: 2rem;
}

/* might need grid trick to pop the image out */
header {
    /* width: 100vw; */

    @media (min-width: 50ch) {
        width: 100%;
    }
}

header img {
    margin-bottom: 40px;
    width: 100%;

    @media (min-width: 50ch) {
        width: 100%;
        border-radius: var(--border-radius-img);
    }
}

ul,
ol {
    /*
    using inside means you can't adjust
    the padding of both into position

    ended up searching and coming across this article about it https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/
    */

    /* list-style-position: inside; */
    padding-inline-start: 24px;
}

li {
    padding-inline-start: 16px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table > * + * {
}

table > tr > td + td {
}

tbody > tr:first-child > td {
    padding-top: 24px;
}

tr > * + * {
    padding-block: 12px;
}

td {
    border-bottom: 1px solid var(--white-coffee);
}

tr td:first-child {
    padding-inline-start: 2rem;
}

tr td:last-child {
    padding-inline-end: 2rem;
}

.preparation {
    @media (min-width: 50ch) {
        border-radius: var(--border-radius-callout);
    }
}