@layer theme {

	.templateEventGraph {

		.inner:not(.contentRight, .contentLeft) {
			text-align: center;
			padding-bottom: calc(var(--gutter) * 1.5);
			.title, .subTitle, .content {
				color: var(--color-dark);
			}
		}

		.container .container {
			grid-column: span 12;
			position: relative;
			border-radius: var(--large-border-radius);
			overflow: hidden;
			padding: calc(var(--section) / 2);

			@media (max-width: 56em) {
				border-radius: var(--border-radius);
				padding: var(--padding) calc(var(--padding) / 2);
			}

			@media (--max-fablet) {
				border-radius: var(--border-radius);
				padding: var(--padding) calc(var(--padding) / 2);
			}

			.media {
				position: absolute;
				inset: 0;
				background-size: cover;
				background-position: center;
				z-index: 0;
				border-radius: 0;
				aspect-ratio: unset;

				&::after {
					content: '';
					position: absolute;
					background: rgba(var(--color-dark-transparency), 0.3);
					-webkit-backdrop-filter: blur(30px);
					        backdrop-filter: blur(30px);
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
			}
            .inner {
                grid-column: span 6;
				.title {
					color: var(--color-light);
				}
				.content {
					font-size: var(--fontsize);
				}
				@media (max-width: 56em) {
					&.contentLeft {
						padding-bottom: var(--gutter);
						border-bottom: 2px solid rgb(255, 255, 255);
					}
				}
				@media (--max-fablet) {
					&.contentLeft {
						padding-bottom: var(--gutter);
						border-bottom: 2px solid rgb(255, 255, 255);
					}
				}
				@media (min-width: 56em) {
					&.contentLeft {
						border-right: 2px solid rgb(255, 255, 255);
						padding-right: calc(var(--padding) * 2);
						.title {
							font-size: calc(var(--m-fontsize) + 1rem);
						}
					}
					&.contentRight {
						padding-left: calc(var(--padding) * 2 - var(--gutter));
					}
				}
				@media (--min-fablet) {
					&.contentLeft {
						border-right: 2px solid rgb(255, 255, 255);
						padding-right: calc(var(--padding) * 2);
						.title {
							font-size: calc(var(--m-fontsize) + 1rem);
						}
					}
					&.contentRight {
						padding-left: calc(var(--padding) * 2 - var(--gutter));
					}
				}
            }

			> .inner {
				z-index: 1;
				flex-direction: row;
				align-items: center;
				gap: var(--padding);
				color: var(--color-light);
				
				@media (max-width: 56em) {
					flex-direction: column;
					gap: var(--gutter);
				}
				
				@media (--max-fablet) {
					flex-direction: column;
					gap: var(--gutter);
				}
			}
		}

		.graph {
			width: fit-content;
			flex-shrink: 0;

			@media (max-width: 56em) {
				width: 164px;
			}

			@media (--max-fablet) {
				width: 164px;
			}

			svg {
				width: 100%;
				height: auto;
				transform: rotate(-90deg);
				overflow: visible;
				.ring {
					stroke-dasharray: var(--circ);
					stroke-dashoffset: var(--circ);
			}

			}

			&.animate .ring {
				animation: eventGraphRing 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
			}

			&.animate .ring-0 { animation-delay: 0.15s; }
			&.animate .ring-1 { animation-delay: 0.4s; }
			&.animate .ring-2 { animation-delay: 0.65s; }
		}

		.items {
			@media (max-width: 56em) {
				width: 100%;
			}
			@media (--max-fablet) {
				width: 100%;
			}
			.title {
				font-size: var(--s-fontsize);
				font-weight: 400;
				margin-bottom: var(--gutter);
				color: var(--color-light);
			}

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				gap: var(--gutter);
				li {
					display: flex;
					align-items: flex-start;
					gap: 8px;
					.dot {
						width: 14px;
						height: 14px;
						border-radius: var(--circle-radius);
						margin-top: 2px;
					}
		
					.subTitle {
						font-size: calc(var(--fontsize) - 0.125rem);
						font-weight: 600;
						color: var(--color-light);
						line-height: 1;
					}
					
					.text {
						color: var(--color-light);
						font-size: calc(var(--xs-fontsize) - 0.125rem);
					}
				}
			}
		}
	}

	@keyframes eventGraphRing {
		to { stroke-dashoffset: var(--offset); }
	}
}