@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');

@font-face {
	font-family: 'VAGRounded TL';
	font-weight: 400;
	src: url('../assets/fonts/0756CE-.ttf');
}
@font-face {
	font-family: 'DynaPuff';
	font-weight: 400;
	src: url('../assets/fonts/DynaPuff-VariableFont_wdth,wght.ttf');
}

main {
	min-height: 70lvh;
}

#program {
	margin-top: 11.7rem;
	max-width: 133rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	padding-block: 6rem;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, min-content);
	grid-template-areas:
		'h h'
		's1 s2';
	gap: 0 4.3rem;

	@media (width < 48em) {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, min-content);
		grid-template-areas:
			'h'
			's1'
			's2';
		gap: 2rem 0;

		margin-top: 5.8rem;
	}

	h1.main-heading {
		font-size: 10rem;
		font-family: 'DynaPuff', sans-serf;
		font-weight: 700 !important;
		text-transform: uppercase;
		display: flex;
		justify-content: center;
		gap: 3px;
		margin-block-start: 0;
		margin-block-end: 4rem;
		grid-area: h;

		@media (width < 1300px) {
			font-size: clamp(4.4rem, 7.6923vw, 100rem);
			margin-block-end: 2rem;
		}

		span:nth-child(1) {
			color: #ec1c24;
		}
		span:nth-child(2) {
			color: #00adee;
		}
		span:nth-child(3) {
			color: #eb008b;
		}
		span:nth-child(4) {
			color: #524fa0;
		}
		span:nth-child(5) {
			color: #524fa0;
		}
		span:nth-child(6) {
			color: #f6921e;
		}
		span:nth-child(7) {
			color: #ec1c24;
		}
		span:nth-child(8) {
			color: #98c93c;
		}
		span:nth-child(9) {
			color: #524fa0;
		}
	}

	section {
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		container-type: inline-size;

		@container (width < 628px) {
			header {
				h2 {
					font-size: clamp(2.2rem, 4vw, 5.2rem);
					@media (width < 48em) {
						font-size: clamp(2.2rem, 7.8787vw, 5.2rem);
					}
				}
			}
			article {
				grid-template-columns: 9.0351% 15.0357% 1fr 7.2647% 10.9599% 7.1606%;

				.date {
					min-height: 35%;
					font-size: clamp(1.5rem, 2.76923vw, 3.6rem);
					padding-block: 0.8462vw;

					@media (width < 48em) {
						font-size: clamp(1.5rem, 5vw, 3.6rem);
					}
				}

				h3 {
					margin-inline-start: clamp(1.13rem, 2vw, 2.6rem);
					font-size: clamp(1.8rem, 2.7692vw, 3.6rem);
					@media (width < 658px) {
						font-size: clamp(1.8rem, 4.7692vw, 3.6rem);
					}
				}

				.location {
					margin-inline-start: clamp(1.13rem, 2vw, 2.6rem);
					font-size: clamp(1.2rem, 2.8vw, 2.1rem);
				}
			}
		}

		@media (width < 48em) {
			gap: 1rem;
			&:not(:first-of-type) {
				margin-top: 3.5rem;
			}
		}
	}

	header {
		background-color: transparent;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content;
		justify-items: center;
		align-items: center;

		& > * {
			grid-column: 1 / -1;
			grid-row: 1 / -1;
		}

		h2 {
			font-family: 'DynaPuff', sans-serf;
			font-size: 5.2rem;
			color: #fff;
			z-index: 1;
		}

		&.bg-green > svg {
			fill: #98c93c;
		}

		&.bg-blue > svg {
			fill: #00adee;
		}
	}

	article {
		display: grid;
		grid-template-columns: 57px 94px 1fr 43px 74px 43px;
		grid-template-rows: repeat(6, minmax(min-content, 2.126rem));
		background-image: none;
		background-repeat: no-repeat;
		background-size: 97% 100%;
		background-position: top right;

		&.green {
			background-image: url('../assets/img/frame-green.svg');
		}

		&.blue {
			background-image: url('../assets/img/frame-blue.svg');
		}

		.decoration {
			width: 100%;
			/* width: 15.1rem;
			height: 35.4rem; */
			grid-column: 1 / 3;
			grid-row: 2 / 6;
			z-index: 2;
		}

		.image {
			width: 100%;
			/* width: 45.7rem;
			height: 27.32rem; */
			grid-column: 2 / 5;
			grid-row: 2 / 4;
			z-index: 3;
		}
		.frame {
			grid-column: 1 / -1;
			grid-row: 1 / -1;
			/* fill: #98c93c; */
			fill: transparent;
			margin-inline-start: 1rem;
			z-index: 1;
		}
		.date {
			grid-column: 4 / -1;
			grid-row: 2 / 4;
			align-self: center;
			background-image: url('../assets/img/Group-125.svg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			min-height: 35%;
			/* min-height: 4.1927vw; */
			/* height: 34%; */
			/* width: 160px;
			height: 96px; */
			text-align: center;
			font-family: 'DynaPuff', sans-serf !important;
			font-weight: 400;
			color: #fff;
			font-size: 3.6rem;
			line-height: 1;
			padding-inline: 0.75rem;
			padding-block: 1.1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 4;
		}

		h3 {
			grid-column: 3 / 6;
			grid-row: 4 / 5;
			z-index: 5;
			margin-inline-start: 2.6rem;
			margin-inline-start: clamp(1.13rem, 1.35417vw, 2.6rem);
			margin-block-start: 0.4rem;
			margin-block-end: 0.4rem;
			/* margin-block: 0; */
			font-family: 'DynaPuff', sans-serf !important;
			font-weight: 700 !important;
			font-size: 3.6rem;
			line-height: 1;
		}

		.location {
			grid-column: 3 / 6;
			grid-row: 5 / 6;
			z-index: 5;
			margin-inline-start: 2.6rem;
			margin-inline-start: clamp(1.13rem, 1.35417vw, 2.6rem);

			font-family: 'M PLUS Rounded 1c', sans-serif !important;
			font-size: 2.1rem;
			line-height: 1;
			margin-block: 0;

			display: flex;
			align-items: baseline;

			&::before {
				color: #ec1c24;
				font-size: 1.9em;
			}
		}

		.link {
			grid-column: 6 / 7;
			grid-row: 5 / 6;
			z-index: 5;
			align-self: baseline;
		}
	}
}