/* Sections */

	.flyer-section {
		margin-bottom: 0.5em;
	}

		.flyer-section > summary {
			display: flex;
			align-items: center;
			gap: 1em;
			padding: 0.75em 0;
			font-weight: 900;
			text-transform: uppercase;
			list-style: none;
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
			transition: color 0.2s ease-in-out;
		}

			.flyer-section > summary::-webkit-details-marker {
				display: none;
			}

			.flyer-section > summary:hover {
				color: var(--color-accent);
			}

			/* Divider line between title and arrow */
			.flyer-section > summary::before {
				content: '';
				order: 1;
				flex: 1 1 auto;
				min-width: 1em;
				height: 1px;
				background-color: var(--color-border);
			}

			/* Arrow: points down when closed, up when open */
			.flyer-section > summary::after {
				content: '';
				order: 2;
				flex-shrink: 0;
				width: 0.6em;
				height: 0.6em;
				margin-top: -0.3em;
				border-right: solid 2px currentColor;
				border-bottom: solid 2px currentColor;
				transform: rotate(45deg);
				transition: transform 0.2s ease-in-out;
			}

			.flyer-section[open] > summary::after {
				margin-top: 0.3em;
				transform: rotate(-135deg);
			}

		.flyer-section-content {
			padding: 0.75em 0 1.5em;
		}

/* Grid */

	/* Height of the flyers, QR codes and link cards; everything in the grid is sized from it */
	.flyer-grid {
		--flyer-height: 20em;

		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 2em;
	}

/* Flyer */

	.flyer {
		width: max-content;
		max-width: 100%;
	}

		/* As wide as the flyer below it, without widening it */
		.flyer-name {
			width: 0;
			min-width: 100%;
			margin: 0 0 0.5em;
			font-size: 0.9em;
		}

		.flyer-media {
			display: flex;
			align-items: flex-start;
			gap: 1em;
		}

			.flyer-media > a {
				flex: 0 1 auto;
				min-width: 0;
			}

		.flyer-image {
			display: block;
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: var(--flyer-height);
			border: solid 1px var(--color-border);
			border-radius: var(--radius);
		}

			.flyer-image.is-qr {
				height: var(--flyer-height);
				image-rendering: pixelated;
			}

		.flyer-qr {
			flex: 0 0 auto;
			align-self: stretch;
			width: 8em;
			container-type: size;
		}

			/* Only the code itself is clickable, not the empty space below it */
			.flyer-qr > a {
				width: fit-content;
			}

			.flyer-qr img {
				display: block;
				width: min(100cqw, 100cqh);
				height: min(100cqw, 100cqh);
				padding: 0.25em;
				border: solid 1px var(--color-border);
				border-radius: var(--radius);
				background-color: var(--color-white);
				object-fit: contain;
				image-rendering: pixelated;
			}

		/* Link card: shown in place of the image for entries that only have a link */
		.flyer-link-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1em;
			height: var(--flyer-height);
			aspect-ratio: 1 / 1.414;
			border: solid 1px var(--color-border);
			border-radius: var(--radius);
			font-weight: 900;
			letter-spacing: 0.1em;
			text-align: center;
			text-transform: uppercase;
			color: inherit;
			transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		}

			/* Arrow pointing right */
			.flyer-link-card::before {
				content: '';
				width: 1em;
				height: 1em;
				border-top: solid 2px currentColor;
				border-right: solid 2px currentColor;
				transform: rotate(45deg);
			}

			.flyer-link-card:hover {
				border-color: var(--color-accent);
				color: var(--color-accent);
			}

			.flyer-link-card:focus-visible {
				outline: solid 2px var(--color-accent);
				outline-offset: 2px;
			}

			.flyer-link-card-label {
				font-size: 0.8em;
			}

		.flyer figcaption {
			width: 0;
			min-width: 100%;
			margin-top: 0.75em;
			line-height: 1.5;
		}

			.flyer figcaption p {
				margin: 0 0 0.75em;
			}

			.flyer figcaption > :last-child {
				margin-bottom: 0;
			}

	@media screen and (max-width: 1280px) {

		.flyer-grid {
			--flyer-height: 18em;
		}

	}

	@media screen and (max-width: 980px) {

		.flyer-grid {
			--flyer-height: 14em;

			gap: 1.5em;
		}

		.flyer-qr {
			width: 6.5em;
		}

	}

	@media screen and (max-width: 736px) {

		.flyer-grid {
			gap: 2em;
		}

		.flyer {
			width: 100%;
		}

			.flyer-media {
				gap: 0.75em;
			}

				.flyer-media > a {
					flex: 1 1 0;
				}

			.flyer-image,
			.flyer-image.is-qr {
				width: 100%;
				height: auto;
				max-height: none;
			}

			.flyer-qr {
				width: min(25%, 6em);
			}

			.flyer-link-card {
				width: 100%;
				height: 10em;
				aspect-ratio: auto;
			}

	}