body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1.25rem; } .intro { margin: 32px; max-width: 1000px; } .intro .recipe { border: 1px solid currentColor; } h1, h2, h3 { margin: 0; } ul, ol { padding: 0; list-style-position: inside; } em { display: block; margin-top: 1.6em; margin-bottom: 1em; font-weight: bold; } .questions { list-style: none; } .questions li::before { content: "❓"; } .questions li { margin-bottom: 1em; padding-left: 8px; border-left: 2px dotted tomato; } /* COOCKBOOK */ .cookbook { margin: 32px; padding: 24px; background-color: #cec; border-radius: 16px; } .cookbook-info { margin: 16px 0; font-style: italic; } .recipes { display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; row-gap: 16px; column-gap: 16px; } .recipe { display: inline-block; background-color: #ffffff; flex-grow: 1; flex-basis: 55ch; width: 55ch; border-radius: 16px; padding: 1ch; } .recipe .title { margin-bottom: 8px; } .recipe .description { font-style: italic; } .recipe .chef { margin-top: 8px; } .recipe .info { margin: 16px 0; } .recipe .ingredients { margin: 16px 0; } .ingredients li { list-style: none; display: inline; } .ingredients li::after { content: ", "; } .ingredients li:last-of-type::after { content: ""; } .recipe ul, .recipe ol { margin: 0; } .intro .recipe { margin: 16px 0; }