@use "~admin-stylesheets/colors";

.nab-recordings-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 3em;
	height: 80vh;
	justify-content: center;
	margin: 0 auto;

	.nab-action-button {
		font-size: 1.2em;
		text-transform: uppercase;
		padding: 1.5em;
		margin-top: 1em;
	}

	h1 {
		font-size: 1em;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		color: colors.$nab-text-dark-grey;
	}

	h4 {
		font-size: 3em;
		line-height: 1;
		margin: 0.5em 0;
	}

	p:first-of-type {
		font-size: 1.2em;
	}
}

.nab-session-recording-image {
	width: 480px;
	height: 360px;
}

@media all and (min-width: 900px) {

	.nab-recordings-container {
		flex-direction: row;
		gap: 1em;
		max-width: 90%;
		text-align: initial;
	}
}

@media all and (min-width: 1500px) {

	.nab-recordings-container {
		max-width: 50vw;
	}
}

@media all and (min-width: 1800px) {

	.nab-session-recording-image {
		width: 640px;
		height: 480px;
	}
}