.form-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-sm);
	background-color: var(--c-bg-lt);

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

	> header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-sm);
		width: 100%;
	}

	> div {
		width: 100%;

		@media (min-width: 768px) {
			position: sticky;
			top: var(--s-md);
			width: calc(50% - var(--s-md));
		}

		> h3 {
			color: var(--c-blue-dk);
		}

		> div {
			width: 100%;
			padding: 0;
		}

		/* icon link list */
		> ul:not(:has(address)) {
			margin: var(--s-sm) 0;
			display: flex;
			gap: var(--s-xs);

			a {
				display: flex;
				align-items: center;
				gap: var(--s-xs);
				color: var(--c-fg-dk);
				text-decoration: none;
				font-family: var(--f-b);
				font-size: clamp(0.875rem, 2vw, 1rem);
				transition: color var(--a-sm);

				&:hover {
					color: var(--c-blue-dk);
				}

				> svg {
					flex-shrink: 0;
					width: var(--s-icon-lg);
					height: var(--s-icon-lg);
					color: var(--c-blue-dk);
				}
			}
		}

		/* location cards */
		> ul:has(address) {
			margin: var(--s-sm) 0 0;
			display: flex;
			flex-direction: column;
			gap: var(--s-sm);

			> li {
				display: flex;
				gap: var(--s-sm);

				> svg {
					flex-shrink: 0;
					width: var(--s-icon-xl);
					height: var(--s-icon-xl);
					color: var(--c-blue-dk);
					margin-top: 2px;
				}

				> div {
					display: flex;
					flex-direction: column;
					gap: var(--s-xs);

					> h4 {
						margin: calc(-1 * var(--s)) 0 0;
						font-family: var(--f-l);
						font-size: 0.7rem;
						font-weight: bold;
						letter-spacing: 1px;
						text-transform: uppercase;
						color: var(--c-blue-dk);
					}

					> address {
						color: var(--c-fg-md);
						font-style: normal;
					}
				}
			}
		}
	}
}