/*
 * Uważność: „Jak praktykujemy podczas wyjazdów”
 * (template-parts/mindfulness/practice.php). From the preview
 * docs/preview/uwaznosc.png: the heading with a short line, then the forms
 * of practice two by two, each with a line icon in a light circle (about
 * 127 px at 1440) beside its heading and text, and a small note in the
 * middle under them. Below 64em one column.
 */

.hf-mindfulness-practice
{
	padding-block: var(--hf-space-section-block);
}

/* About 45 px in the preview at 1440, as „Czym jest uważność?” above. */
.hf-mindfulness-practice__title
{
	margin: 0 0 var(--hf-space-l);
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-mindfulness-practice__list
{
	display: grid;
	gap: var(--hf-space-l) var(--hf-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-mindfulness-practice__item
{
	display: flex;
	align-items: center;
	gap: clamp(var(--hf-space-s), 0.5rem + 2vw, var(--hf-space-l));
}

/* 127 px in the preview at 1440, 88 px at 768, 72 px on phones. */
.hf-mindfulness-practice__badge
{
	display: grid;
	flex: none;
	place-items: center;
	width: clamp(4.5rem, 2.65rem + 5.95vw, 8rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hf-color-band-strong);
	color: var(--hf-color-icon);
}

.hf-mindfulness-practice__icon
{
	width: 60%;
	height: auto;
}

.hf-mindfulness-practice__body
{
	min-width: 0;
}

/* As the headings on the right of „Czym jest uważność?”. */
.hf-mindfulness-practice__name
{
	margin: 0 0 var(--hf-space-xs);
	font-size: var(--hf-text-l);
	line-height: 1.3;
	text-wrap: balance;
}

/* About 24 px in the preview at 1440, nearly the size of the heading
   (--hf-text-m was 25% smaller and looked sparse), lines up to about
   410 px as there. */
.hf-mindfulness-practice__text
{
	max-width: 17.5em;
	margin: 0;
	font-size: var(--hf-text-l);
	line-height: 1.45;
	text-wrap: pretty;
}

/* About 20 px in the preview at 1440 (--hf-text-s was 25% smaller). */
.hf-mindfulness-practice__note
{
	margin: var(--hf-space-xl) 0 0;
	font-size: var(--hf-text-m);
	text-align: center;
	text-wrap: balance;
}

/* Two columns, as in the preview. Not below 64em: at 896 the headings took
   2 lines and the texts up to 4. */
@media (min-width: 64em)
{
	.hf-mindfulness-practice__list
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--hf-space-xl);
	}
}