.accordion {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-sm);

	@media (min-width: 768px) {
		gap: var(--s-lg);
	}

	> div {
		width: 100%;

		@media (min-width: 768px) {
			width: calc(60% - var(--s-md));
		}

		> div {
			margin-top: var(--s-sm);

			@media (min-width: 768px) {
				margin-top: var(--s-md);
				padding: var(--s-md);
				background-color: var(--c-bg-lt);
				box-shadow: var(--s) var(--s) var(--s-xs) rgba(0, 0, 0, 0.15);
				border-top-left-radius: var(--s-lg);
				border-bottom-right-radius: var(--s-lg);
			}

			> details {
				+ details {
					border-top: 1px solid var(--c-br-lt);
				}

				> summary {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: var(--s-sm);
					padding: var(--s-sm) 0;
					cursor: pointer;
					user-select: none;

					> h3 {
						flex: 1;
					}

					> i {
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: var(--s-md);
						height: var(--s-md);
						border-radius: 50%;
						background-color: var(--c-blue-lt);
						font-family: var(--f-b);
						font-size: 1.25rem;
						font-style: normal;
						color: var(--c-fg-dk);
						transition: background-color var(--a-sm), color var(--a-sm);

						&::after {
							content: '\002B';
						}
					}
				}

				&[open] > summary > i::after {
					content: '\2212';
				}

				> div {
					padding: var(--s-sm) 0;

					hr {
						border-color: var(--c-br-lt);
					}
				}

				&[open] > summary {
					color: var(--c-blue-dk);
					font-weight: var(--f-b);
					border-bottom: 1px solid var(--c-br-lt);
				}
			}
		}
	}

	> aside {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: var(--s-sm);

		@media (min-width: 768px) {
			position: sticky;
			top: var(--s-lg);
			order: -1;
			align-items: flex-start;
			width: calc(40% - var(--s-md));
			margin-top: var(--s-md);
		}

		> div {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--s-sm);
			width: 100%;
			text-align: center;

			&:not(:first-child) {
				margin-top: var(--s-md);
				padding-top: var(--s-md);
				border-top: 1px solid var(--c-br-lt);
			}

			> img {
				width: 100%;
				max-width: var(--w-xs);
				object-fit: cover;
			}

			> svg {
				max-width: var(--w-xs);
				fill: var(--c-blue-lt);
			}
		}
	}
}