:root {
    --max-photo-width: 37.5rem;
    --padding-inline-page: 0.5rem;
    --padding-meta-content: 1.25rem;
    --max-content-width-desktop: calc(var(--max-photo-width) * 2);
}

.recipe-actions {
    display: flex;
    justify-content: flex-end;
    max-width: var(--max-content-width-desktop);
    padding-inline: var(--padding-inline-page);
    box-sizing: content-box;
    margin-inline: auto;
    margin-bottom: 2rem;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.meta {
    margin-bottom: 4rem;
    padding-inline: var(--padding-inline-page);
    --radius: 1.5rem;
    margin-inline: auto;
    box-sizing: content-box;
}

.meta__photo {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: var(--max-photo-width);
    display: block;
    object-fit: cover;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    margin-left: max(0px, calc(min(var(--padding-meta-content), 50% - var(--max-photo-width) / 2)));
    z-index: 1;
}

.meta__content {
    height: 100%;
    background-color: white;
    padding: var(--padding-meta-content);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border: 2px solid var(--color-border);
    margin-top: -2px;
}

.meta__title {
    hyphens: auto;
    font-size: 1.5rem;
    line-height: 1.1;
}

.meta__owner {
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.meta__iconwtext-container {
    margin-block: 0.5rem;
}

.meta__iconwtext {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.meta__iconwtext i {
    font-size: 1.5em;
}

.meta__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta__tag {
    font-size: 0.875rem;
    /* background-color: hsl(0 0% 95%); */
    padding-inline: 0.625rem;
    padding-block: 0.375rem;
    border-radius: 8px;
    line-height: 1;
    border: 2px solid var(--color-border);
}

.meta__description> :last-child {
    margin-bottom: 0;
}

@media (min-width: 375px) {
    :root {
        --padding-inline-page: 1rem;
        --padding-meta-content: 1.5rem;
    }

    .meta {
        --radius: 2rem;
    }

    .meta__title {
        font-size: 1.75rem;
    }
}

@media (min-width: 480px) {
    :root {
        --padding-inline-page: 2rem;
        --padding-meta-content: 2rem;
    }
}

@media (min-width: 768px) {
    .meta__title {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        --radius: 2rem;
        max-width: var(--max-content-width-desktop);
        margin-inline: auto;
        align-items: center;
    }

    .meta__photo {
        border-radius: 0;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }

    .meta__content {
        border-radius: 0;
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        margin-top: 0;
        margin-left: -2px;
    }
}

.content {
    border-top: 2px solid var(--color-border);
    background-color: white;
    padding-block: 4rem;
    padding-inline: var(--padding-inline-page);
}

.content__wrapper {
    max-width: 47rem;
    display: flex;
    row-gap: 2rem;
    flex-direction: column;
}

.content__wrapper>*>*:first-child {
    margin-top: 0;
}

.content__instructions p {
    line-height: 1.7;
}

.ingredients {
    border-collapse: collapse;
}

.ingredients td {
    padding-block: 0.5rem;
}

.ingredients td:not(:first-child) {
    padding-left: 2rem;
}

.ingredients tr:not(:last-child) {
    border-bottom: 2px solid var(--color-border);
}

@media (min-width: 768px) {
    .content {
        padding-inline: calc(var(--padding-inline-page) + var(--padding-meta-content));
    }
}

@media (min-width: 1024px) {
    .content {
        padding-inline: var(--padding-inline-page);
    }

    .content__wrapper {
        --gap: 5rem;
        --instructions-max-width: 45rem;

        max-width: var(--max-content-width-desktop);
        flex-direction: row;
        column-gap: var(--gap);
        /* justify-content: space-between; */
        margin-inline: auto;
    }

    .content__ingredients {
        flex-shrink: 0;
        max-width: calc(var(--max-content-width-desktop) - var(--gap) - var(--instructions-max-width));
    }

    .content__instructions {
        max-width: var(--instructions-max-width);
    }
}