.personalities {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 30px;

	.personality-card {
		position: relative;
		display: block;
		text-decoration: none;
		color: var(--color-white);

		.personality-card__image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.personality-card__content {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			gap: 4px;
			padding: 20px;
			background: linear-gradient(to top, rgba(8, 8, 8, .75), rgba(8, 8, 8, 0) 55%);
		}

		.personality-card__name {
			margin: 0;
			font-size: 22px;
			line-height: 26px;
			font-weight: 700;
		}

		.personality-card__role {
			margin: 0;
			font-size: 12px;
			line-height: 16px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: .04em;
			opacity: .9;
		}

		.personality-card__play {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			margin-top: 12px;
			font-size: 16px;
			font-weight: 700;
		}

		.personality-card__play-icon {
			position: relative;
			display: inline-flex;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background-color: var(--color-white);
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 54%;
				transform: translate(-50%, -50%);
				border-style: solid;
				border-width: 7px 0 7px 12px;
				border-color: transparent transparent transparent var(--color-raspberry);
			}
		}
	}

	.btn {
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
	}
}

.personality-video-modal {
	width: min(840px, 92vw);
	padding: 0;
	border: none;
	background: transparent;
	overflow: visible;

	&::backdrop {
		background-color: rgba(8, 8, 8, .7);
	}

	.personality-video-modal__player {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
		overflow: hidden;
		background-color: var(--color-carbone);

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	.personality-video-modal__close {
		position: absolute;
		top: -44px;
		right: 0;
		width: 36px;
		height: 36px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: var(--color-white);
		cursor: pointer;

		&::before, &::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 16px;
			height: 2px;
			background-color: var(--color-carbone);
		}
		&::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}
		&::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}
}