.container {
	display: flex;
	gap: 30px;
}

.orientacoes {
	padding: 20px;
	border: 1px solid var(--tema-da-orientacao);
	background: color-mix(in srgb, var(--tema-da-orientacao) 10%, transparent);
	border-radius: 20px;

	&.temporais {
		--tema-da-orientacao: #4f46e5;
	}

	&.chuvas {
		--tema-da-orientacao: #0284c7;
	}

	&.granizos {
		--tema-da-orientacao: #64748b;
	}

	&.deslizamentos {
		--tema-da-orientacao: #881337;
	}

	&.enxurradas {
		--tema-da-orientacao: #d97706;
	}
	&.alagamentos {
		--tema-da-orientacao: #06b6d4;
	}
	&.inundacoes {
		--tema-da-orientacao: #1e3a8a;
	}
}

.lista-container {
	list-style: inside !important;
	padding-left: 0;

	li {
		gap: 10px;
		margin-bottom: 10px;
	}
}