h1#recipe_name{
	text-align: center;
}
div.tab-content[data-tabs="recipe"]{
	max-width: 65rem;
}
div.tab-content[data-tabs="recipe"] a{
	color: var(--content-second-fg-colour);
	text-decoration: underline;
}

/* Introduction block setup */
div#recipe_introduction div{
	display: grid;
	grid-template-columns: [begin] 20% [info-right] 60% [photo-right] 20% [end];
	grid-template-rows: [main] auto [lower] auto [end];
	column-gap: 0.6rem;
}

/* Introduction block (basics and big screens) */
div#recipe_introduction div p{
	grid-column: begin / photo-right;
	grid-row: main;
}
div#recipe_introduction div img{
	grid-column: photo-right / end;
	grid-row: main;
	width: calc(100% - var(--tab-padding));
	margin-bottom: 0.5rem;
}

/* Introduction block (even-numbered rows - only on big screens) */
@media screen and (min-width: 35rem){
	div#recipe_introduction div[data-even] p{
		grid-column: info-right / end;
	}
	div#recipe_introduction div[data-even] img{
		grid-column: begin / info-right;
		width: 100%;
	}
}

/* Introduction block (important) */
div#recipe_introduction div[data-important] p{
	grid-column: begin / end;
}
div#recipe_introduction div[data-important] img{
	grid-column: begin / end;
	grid-row: lower;
	width: calc(100% - var(--tab-padding));
}

/* Introduction block (solo elements) */
div#recipe_introduction div[data-solo] p{
	grid-column: begin / end;
}
div#recipe_introduction div[data-solo] img{
	grid-column: begin / end;
	width: calc(100% - var(--tab-padding));
}

/* Introduction block (small screens) */
@media screen and (max-width: 35rem){
	div#recipe_introduction div p{
		grid-column: begin / end;
	}
	div#recipe_introduction div img{
		grid-column: begin / end;
		grid-row: lower;
		width: calc(100% - var(--tab-padding));
	}
}

div.tab-content[data-tabs="recipe"] li{
	margin-bottom: 0.7rem;
}