.intro {
	padding: 4rem 0;
	background-color: var(--color-secondary);

	.resources-card {
		position: relative;
		background-color: var(--color-white);
		transition: all 0.3s;

		.image {
			position: relative;
			overflow: hidden;

			img {
				transition: all 0.3s;
			}

			.image-label {
				position: absolute;
				top: 1rem;
				left: 1rem;
				padding: 0.25rem 0.625rem;
				color: var(--color-white);
				background-color: var(--color-primary);
				text-transform: uppercase;
				font-size: var(--text-2xs);
				letter-spacing: 0.15em;
			}
		}

		.content {
			padding: 2rem;
			background-color: var(--color-white);

			.title {
				transition: all 0.15s;
			}

			.text {
				font-size: var(--text-sm);
				color: var(--color-greyish-brown);
				transition: all 0.15s;
			}
		}

		.overlay-link {
			position: absolute;
			inset: 0;
			z-index: 1;
			background: none;
			border: none;
			outline: none;
		}

		&:hover {
			box-shadow: 0 0.25rem 0.5rem #00000024;

			.image {
				img {
					scale: 1.1;
				}
			}

			.title {
				color: var(--color-primary);
			}
		}
	}

	.video-dialog {
		width: calc(100% - 2rem);
		height: calc(100% - 2rem);
		border: none;
		border-radius: 0;
		background-color: var(--color-white);
		padding: 0;
		max-width: 75rem;
		max-height: fit-content;
		overflow: visible;		

		&::backdrop {
			background-color: #00000080;
		}

		.dialog-container {
			position: relative;
		}

		.close-dialog {
			width: 2rem;
			height: 2rem;
			display: grid;
			place-items: center;
			position: absolute;
			top: 0;
			right: 0;
			color: var(--color-black);
			background: var(--color-white);
			border: none;
			outline: none;
			transition: all 0.15s;

			&:hover,
			&:focus-visible {
				color: var(--color-white);
				background-color: var(--color-primary);
			}
		}

	}

	@media (width >= 1200px) {
		padding: 4rem 0 6rem;
	}
}