.addresses {
	padding: 120px 0;
	background-color: #eeebe7;
}

.addresses__wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
	column-gap: 20px;
}

.addresses__list {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	grid-template-columns: repeat(2, 172px);
	column-gap: 16px;
	row-gap: 8px;
}

.addresses__item {
	color: #22273499;
	width: 172px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.addresses__item.active {
	color: #dd1600;
}

.addresses__card {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 647px;
	height: 387px;
	opacity: 1;
	transition: opacity 0.2s ease;
	will-change: opacity;
	position: relative;
}

.addresses__card--content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: start;
	width: 100%;
	padding: 32px;
	background-color: #f7f5f2;
}

.addresses__card--city {
	color: #26292f;
}

.addresses__card--address {
	color: #26292f;
}

.addresses__card--img {
	width: 188px;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
	display: block;
}

.addresses__card--img[src=""] {
	visibility: hidden;
}

.addresses__card--spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 3px solid #e0e0e0;
	border-top-color: #dd1600;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	display: none;
}

@keyframes spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.addresses__card--fade-out {
	opacity: 0;
}

.addresses__card--fade-in {
	opacity: 1;
}

@media (max-width: 1024px) {
	.addresses {
		padding: 80px 0;
	}

	.addresses__wrapper {
		flex-direction: column;
		row-gap: 60px;
	}

	.addresses__list {
		grid-template-rows: repeat(4, auto);
		grid-template-columns: repeat(3, 207px);
	}

	.addresses__item {
		width: 207px;
	}

	.addresses__card {
		max-width: none;
	}

	.addresses__card--img {
		width: 208px;
	}
}

@media (max-width: 768px) {
	.addresses__list {
		grid-template-columns: repeat(3, 180px);
	}

	.addresses__item {
		width: 180px;
	}

	.addresses__card--img {
		width: 188px;
	}
}

@media (max-width: 640px) {
	.addresses {
		padding: 64px 0;
	}

	.addresses__wrapper {
		row-gap: 56px;
	}

	.addresses__list {
		grid-template-rows: repeat(6, auto);
		grid-template-columns: repeat(2, 152px);
		column-gap: 8px;
		row-gap: 6px;
	}

	.addresses__item {
		width: 152px;
	}

	.addresses__card {
		flex-direction: column;
		height: 427px;
	}

	.addresses__card--content {
		padding: 20px;
		height: 100%;
	}

	.addresses__card--address {
		margin-top: auto;
	}

	.addresses__card--img {
		width: 100%;
		height: 160px;
	}
}