@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;
	}

    .icon.seq.large {
        width: 1.5rem;
        height: 1.5rem;
    }

    .icon.small {
        margin-inline: 0.1rem 0.3rem;
    }

	.sub > .scores::before,
	.subPg > .scores::before,
	.rends::before,
    p-details::part(btn) {
        zoom: 80%;
    }
}

@media (max-width: 594px) {
    #tabs::part(burger) {
        justify-content: flex-start;
        margin-inline-start: 0.3em;
    }

	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;
	}
}