@media (max-width: 768px) {

	.page {
		grid-template-columns: 100%;
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas:
        "header"
        "nav"
        "main"
        "outline"
        "footer";
	}

	.outline {
		max-width: -moz-available;
		max-width: -webkit-fill-available;
		max-width: fill-available;
		border-right: none;
	}

	.outline > .otl {
		display: none;
	}
}

@media (max-width: 594px) {
	h1 > .icon {
		padding: 0.25rem !important;
		width: 2rem !important;
		height: 2rem !important;
		border-radius: .5rem !important;
		margin-inline-end: 0.6rem !important;
	}

	h1 > .ti {
		margin: .5rem 0;
	}

	dialog {
		width: -webkit-fill-available;
		width: -moz-available;
		max-width: none;
		box-shadow: none;
		border-radius: 0;
	}

	main,
	main.activity {
		padding: 0.5rem;
	}

	nav.program {
		padding-inline: 0.4rem;
	}

	nav.program .back {
		margin-inline-start: 0;
	}

	.rendList > p-rendbutton > .ti {
		max-width: initial;
		white-space: initial;
	}

	.rendList > p-rendbutton {
		padding: 0.4rem;
		margin: 0;
	}

	.bk {
		margin: .8rem 0;
	}
}