section.hotels {
	margin-block: 64px 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;

	& .hotels-heading {
		display: flex;
		flex-direction: column;
		padding-inline: 16px;

		& .hotels-title {
		}
	}

	& .hotels-carousel {
		display: grid;
		grid-template-areas: 'a';
		grid-template-columns: 100%;

		& .hotels-carousel-indicators {
			grid-area: a;

			position: sticky;
			top: var(--header-height, 0);

			display: flex;
			max-width: 860px;

			z-index: 10;

			padding: 16px;
			height: fit-content;

			& .hotels-carousel-indicators-container {
				display: flex;
				flex-wrap: wrap;
				background: var(--color-bg-1);
				padding: 8px;
				gap: 8px;
				border-radius: var(--radius-md);

				& .hotels-carousel-indicator {
					flex-shrink: 0;
					flex-grow: 1;

					height: 56px;
					display: flex;
					justify-content: center;
					padding: 8px;
					border-radius: var(--radius);
					cursor: pointer;
					border: 1px solid transparent;
					transition-property: background, border;

					&[data-carousel-selected] {
						background: var(--color-bg-2);
					}

					&:hover {
						border-color: var(--color-border);
					}

					&:active {
						border-color: transparent;
					}

					& .hotels-carousel-indicator-logo {
						display: flex;
						flex-direction: column;
						width: 168px;
						height: 40px;

						& img {
							min-height: 0;
							flex-basis: 0;
							flex-grow: 1;
							width: auto;
							height: 100%;
							object-fit: contain;
						}
					}
				}
			}
		}

		& .hotels-carousel-container {
			grid-area: a;

			display: flex;

			& .hotels-hotel {
				position: relative;
				flex-basis: 100%;
				flex-grow: 1;
				flex-shrink: 0;
				height: max(640px, calc(100lvh - var(--header-height, 0px)));

				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				& .hotels-hotel-background {
					position: absolute;
					inset: 0;

					display: flex;
					flex-direction: column;

					& img {
						min-height: 0;
						flex-basis: 0;
						flex-grow: 1;
					}

					& .hotels-hotel-background-overlay {
						position: absolute;
						inset: 0;
						background: linear-gradient(
							to right,
							hsl(0 0 0 / 0.75),
							hsl(0 0 0 / 0)
						);
					}
				}

				& .hotels-hotel-info {
					position: relative;
					color: white;
					padding: 64px;
					display: flex;
					flex-direction: column;
					gap: 24px;

					@media (width < 768px) {
						padding: 32px;
					}

					& .hotels-hotel-heading {
						display: flex;
						flex-direction: column;
						gap: 16px;

						& .hotels-hotel-title {
							max-width: 6em;
						}

						& .hotels-hotel-locations {
							display: flex;
							flex-wrap: wrap;
							gap: 8px;

							& .hotels-hotel-location {
								border-radius: var(--radius-full);
								padding: 4px 12px;
								border: 1px solid
									color-mix(in oklab, currentColor 30%, #fff0);
								font-size: calc(var(--text-sm) * 1px);
							}
						}
					}

					& .hotels-hotel-description {
						max-width: 18em;
					}
				}
			}
		}
	}
}