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

	> .container > .content {
		display: flex;
		flex-direction: column;
		gap: var(--clamp-30-10);

		> .title {
			font-size: var(--clamp-48-28);
			font-weight: 800;
			line-height: 1.3;
			color: var(--black);
		}

		.videos {
			display: flex;
			gap: var(--clamp-16-10);
			width: 100%;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}
		
		.image {
			object-fit: cover;
		}

		.video, .image {
			position: relative;
			width: 100%;
			height: min(400px, calc((100dvh - var(--header-height)) / 2.5));
			padding: 0;
			overflow: hidden;

			border: 0;
			border-radius: var(--clamp-15-5);
			background-color: transparent;
			cursor: pointer;

			.preview {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.play {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;

				display: flex;
				align-items: center;
				justify-content: center;

				width: 58px;
				height: 58px;

				border-radius: 50%;
				background-color: var(--white);

				color: var(--blue);

				transform: translate(-50%, -50%);

				svg {
					width: 22px;
					height: 26px;
					margin-left: 4px;
				}
			}
			
			&.is-playing {
				.play {
					opacity: 0;
					pointer-events: none;
				}
			}
		}

		.consultation {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--clamp-20-10);
			padding-inline: var(--clamp-30-10);
        	padding-block: var(--clamp-40-10);
			border-radius: var(--clamp-20-10);
			background-color: var(--lilac);

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

			.title {
				font-size: var(--clamp-24-20);
				font-weight: 800;
				line-height: 1.25;
				color: var(--black);
			}

			.description {
				font-size: var(--clamp-16-12);
				font-weight: 500;
				line-height: 1.3;
				color: var(--black);
			}
		}
	}
}

@media (max-width: 767px) {
	.about {
		> .container > .content {
			.consultation {
				flex-direction: column;
				align-items: flex-start;
			}
		}
	}
}