.contacts {
	> .container {
		padding-block: var(--clamp-40-20);
	}

	> .container > .content {
		display: grid;
		grid-template-columns: 220px 1fr;
		gap: var(--clamp-40-20);
		align-items: stretch;

		.info {
			display: flex;
			flex-direction: column;
		}

		.title {
			margin-bottom: var(--clamp-30-10);

			font-size: var(--clamp-32-26);
			font-weight: 800;
			line-height: 1.25;
			color: var(--black);
		}

		.items {
			display: flex;
			flex-direction: column;
			gap: var(--clamp-20-10);
		}

		.item {
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.label {
			font-size: var(--clamp-16-12);
			font-weight: 400;
			line-height: 1.25;
			color: var(--black);
		}

		.value {
			display: flex;
			flex-direction: column;

			font-size: var(--clamp-18-14);
			font-weight: 800;
			line-height: 1.3;
			color: var(--black);

			p {
				margin-bottom: 4px;

				&:last-child {
					margin-bottom: 0;
				}
			}

			a {
				display: block;
				max-width: max-content;

				color: inherit;
				text-decoration: none;
			}
		}

		.socials {
			.value {
				flex-direction: row;
				flex-wrap: wrap;
				gap: var(--clamp-12-8);
			}

			.social {
				display: inline-flex;
				align-items: center;
				justify-content: center;

				color: var(--white);
				text-decoration: none;

				transition:
					background-color var(--trans),
					color var(--trans),
					transform var(--trans);
				
				svg {
					min-width: var(--clamp-40-20);
					width: var(--clamp-40-20);
					height: var(--clamp-40-20);
				}

				&:hover {
					transform: translateY(-2px);
				}
			}
			.social:has(> svg.fb) { display: none !important; }
		}

		.map {
			width: 100%;
			min-height: 230px;
			overflow: hidden;

			border-radius: 18px;
			background-color: var(--sky);

			iframe {
				display: block;
				width: 100%;
				height: 100%;
				border: 0;
			}
		}
	}
}

@media (max-width: 767px) {
	.contacts {
		> .container > .content {
			grid-template-columns: 1fr;

			.map {
				min-height: 260px;
			}
		}
	}
}