/*
 * La page « Comment louer ». Balisage : inc/comment-louer.php. Pas de
 * maquette avant l'intégration : planche dessinée après (p8.py).
 * Étapes : pel-steps, css/pro.css ; conditions : pel-rental-terms,
 * css/fiche.css ; publics : pel-public-card, css/accueil.css ; questions :
 * pel-faq, css/evenement.css.
 */

.pel-comment-louer__titre {
	margin: var(--pel-space-s) 0;
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-comment-louer__chapo,
.pel-comment-louer__texte {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-comment-louer__actions {
	margin: 0;
}

/* « Le prix comprend » et « Bon à savoir », côte à côte. */
.pel-comment-louer__conditions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pel-space-m);
}

.pel-comment-louer__publics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.pel-comment-louer__publics {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.pel-comment-louer__conditions {
		grid-template-columns: minmax(0, 1fr);
	}
}