.panel-booking {
	--booking-width: 374px;
	display: grid;
	grid-template-columns: minmax(0, 1.67fr) minmax(0, 1fr);
	align-items: stretch;
	background: var(--deep-blue);
	margin-bottom: var(--space-12);

	.img-cont {
		aspect-ratio: 238 / 216;
		width: 100%;

		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}
	.content {
		padding: var(--space-2) var(--space-4);
		display: grid;
		align-content: center;

		& > * {
			font-family: var(--font-display-alt);
			font-size: 0.625rem;
			line-height: 1.5;
			display: block;
			font-weight: 100;
			color: var(--light-blue);

			a {
				color: inherit;
				transition: color var(--transition-appendix);

				@media (hover: hover) {
					&:hover {
						color: var(--pink);
					}
				}
			}
		}
	}

	.booking-widget {
		grid-row: 2;
		grid-column: 1 / 3;
	}

	@media (min-width: 40em) {
		& {
			grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, calc(var(--booking-width) / 2))) minmax(0, 1fr);
		}
		.img-cont {
			aspect-ratio: 720 / 784;
			grid-column: 1 / 3;
			grid-row: 1;
		}
		.content {
			grid-column: 4 / 6;
			grid-row: 1;

			& > * {
				font-size: var(--text-base);
			}
		}
		.booking-widget {
			grid-column: 2 / 4;
			grid-row: 1;
			align-self: center;
			margin-block: var(--space-5);
		}
	}
	@media (min-width: 64em) {
		& {
			grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, calc(var(--booking-width) / 2))) minmax(0, 1fr);
			margin-bottom: 100px;
		}
		.content {
			grid-column: 4 / 5;
			padding: var(--space-10);

			& > * {
				font-size: 1.625rem;
			}
		}
	}
}