/*
[data-user="member"],
[data-user="subscriber"] {
	width: calc(100% - 30px);
	height: calc(100vh - 30px);
	min-width: 0;
	min-height: 0;
	display: flex;
	overflow: hidden;
}
*/
[data-user="member"],
[data-user="subscriber"] {
	width: calc(100% - 30px);
	height: calc(100vh - 30px);
	height: calc(100dvh - 30px);
	min-width: 0;
	min-height: 0;
	display: flex;
	overflow: hidden;
}

[data-user="member"] {
	margin: 15px;
	flex-flow: row nowrap;
	border: var(--border);
	background: var(--f4f4f4);
}
[data-user="member"] > [data-name="navigation"] {
	width: 300px;
	flex: 0 0 300px;
	display: flex;
	flex-flow: column nowrap;
	border-right: var(--border);
	overflow-y: auto;
}
[data-user="member"] > [data-name="navigation"] > li {
	width: 100%;
}
[data-user="member"] > main {
	width: 100%;
	padding: 15px;
	flex: 1;
}

[data-user="subscriber"] {
	width: min(1024px, calc(100% - 30px));
	margin: 15px auto;
	flex-flow: column nowrap;
}
[data-user="subscriber"] > [data-name="navigation"] {
	height: auto;
	display: flex;
	flex-flow: row wrap;
	border: var(--border);
}
[data-user="subscriber"] > [data-name="navigation"] > li {
	width: auto;
	flex: 0 0 auto;
}
/*
[data-user="subscriber"] > main {
	height: 100%;
	min-width: 0;
	min-height: 0;
	padding-top: 15px;
	margin: unset;
	flex: 1;
	overflow-y: auto;
	flex-flow: row wrap;
	align-items: top;
	gap: 15px;
}
*/
[data-user="subscriber"] > main {
	height: auto;
	padding-top: 15px;
	flex: 1 1 0;
}

@media (max-width: 1080px) {
/*
	[data-user="member"],
	[data-user="subscriber"] {
		width: calc(100% - 20px);
		height: calc(100vh - 20px);
		margin: 10px;
	}
*/
	[data-user="member"],
	[data-user="subscriber"] {
		width: calc(100% - 20px);
		height: calc(100vh - 20px);
		height: calc(100dvh - 20px);
		margin: 10px;
	}

}

@media (max-width: 900px) {
}

@media (max-width: 768px) {

	[data-name="quadrant-layout"] {
		height: auto;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-template-areas:
			"introduction"
			"announcement"
			"winners"
			"nextdraws";
	}

	[data-name="quadrant-layout"] > * {
		width: 100%;
		height: auto;
	}

	[data-name="quadrant-layout"] > [data-name="announcement"],
	[data-name="quadrant-layout"] > [data-name="winners"] {
		aspect-ratio: 2 / 1;
	}

	[data-name="nextdraws"] > li::before,
	[data-name="nextdraws"] > li::after {
		min-width: 130px;
	}

}

@media (max-width: 600px) {
}

@media (max-width: 480px) {

	[data-name="quadrant-layout"] > [data-name="announcement"],
	[data-name="quadrant-layout"] > [data-name="winners"] {
		aspect-ratio: 4 / 3;
	}

}