.fr-customer-rides-header {
	align-items: center;
	background-color: #202020;
	display: flex;
	flex-flow: column;
	gap: calc(var(--default-spacing-unit) * 1.5) var(--default-spacing-unit);
	padding: calc(var(--default-spacing-unit) * 1.5);

	@media ( min-width: 60em ) {
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.fr-customer-rides-header__title {
		color: #FFF;
		margin-bottom: 0;
	}
}

.fr-customer-rides {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, 1fr);

	@media ( min-width: 60em ) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fr-customer-ride {
	aspect-ratio: 1/1;
	background: none;
	border: 0;
	outline: none;
	overflow: hidden;
	padding: 0;

	&:not(:disabled) {
		cursor: pointer;
	}

	&:hover .fr-customer-ride-image {
		transform: scale(1.35);
	}
}

.fr-customer-ride-image {
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.05);
	transition: all 350ms cubic-bezier(0.83, 0.08, 0.16, 0.97);
	width: 100%;
}

.fr-customer-rides-dialog {

	.c-dialog__container {
		align-items: center;
		background: none;
		border-radius: 0;
		display: flex;
		height: 100%;
		justify-content: center;
		max-height: 100vh;
		max-width: 100%;
		padding: 0;
		position: relative;
		width: 100%;
	}

	.c-dialog__close {
		position: absolute;
		right: calc(var(--default-spacing-unit) * 2);
		top: calc(var(--default-spacing-unit) * 2);
	}

	.fr-customer-rides-modal-content {
		align-items: center;
		display: flex;
		justify-content: center;
		
		img {
			max-height: 90vh;
			max-width: 90vw;
		}
	}
}