@layer components.event-agenda {
	[data-c-event-agenda] {
		padding-top: 50px;
		padding-bottom: 50px;
		color: var(--color-dark-blue);
		position: relative;

		@media (max-width: 768px) {
			padding-top: 16px;
			padding-bottom: 16px;
		}

		table {
			width: 100%;
			caption-side: bottom;
			border-collapse: collapse;
			font-size: var(--font-size-base);

			@media (max-width: 768px) {
				display: block;
				font-size: var(--font-size-lg);

				thead {
					display: none;
				}

				tbody {
					display: flex;
					flex-direction: column;
					gap: 0;

					tr {
						display: block;
						border-bottom: 1px solid var(--color-light-gray);
						padding: 12px 0;
					}

					td {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0;
						border: 0;

						&[data-label]::before {
							content: attr(data-label);
							font-weight: var(--font-weight-extra-bold);
						}
					}
				}
			}

			@media (max-width: 576px) {
				font-size: var(--font-size-md);
			}

			th,
			td {
				padding: 15px;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid var(--color-light-gray);

				&:first-child {

					font-variant-numeric: tabular-nums;


					@media (max-width: 1200px) {
						padding-left: 0;
						width: auto;
					}
				}
			}
		}

		.blob {
			position: absolute;
			bottom: -50px;
			left: 0;
			width: 180px;
			height: auto;
			z-index: -1;
			user-select: none;

			@media screen and (max-width: 1199px) {
				width: 160px;
				bottom: -30px;
			}

			@media screen and (max-width: 992px) {
				display: none;
			}
		}
	}
}