@charset "UTF-8";

html:has(dialog[open]) {
  overflow: hidden;
}

.c-modal {
	width: 800px;
	max-width: calc(100% - 2rem);
	height: fit-content;
	max-height: calc(100dvh - 2rem);
	background: #fff;
	border: none;
	padding: 1rem;
}

@media screen and (min-width: 768px) {
	.c-modal {
		padding-bottom: 3rem;
	}
}

.c-modal-header {
	position: sticky;
	top: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
}

.c-modal-header__headline {
	margin-bottom: 0;
	flex: 1;
}

.c-modal-header__close {
	aspect-ratio: 1 / 1;
	margin-left: auto;
}

@media screen and (min-width: 768px) {
	.c-modal__body {
		padding-inline: 5rem;
	}
}