section {
	padding-block: 3rem;
}
.f-accordion .v-content .v-title {
	font-weight: 600;
}

.v-jumbotron-container {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;

	& .v-jumbotron {
		border: 1px solid var(--border-clr);
		border-radius: 0.8rem;
		padding: 1rem;
		display: flex;
		align-items: center;
		gap: 0.5rem 1rem;
		box-shadow: transparent 0px 8px 24px;
		transition: box-shadow 300ms ease-in-out;

		@media all and (max-width: 500px) {
			& {
				flex-wrap: wrap;
			}
		}

		& .v-logo-image {
			border: 1px solid var(--border-clr);
			aspect-ratio: 1/1;
			width: 3.5rem;
			max-width: 4rem;
			padding: 0.7rem;
			border-radius: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& .v-logo-content {
			display: flex;
			flex-direction: column;
			row-gap: 5px;
		}
		& .v-logo-description {
			font-size: 0.8rem;
			font-weight: 300;
			opacity: 0.9;
			line-height: 1.3;
		}

		&:hover {
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
	}
}

.v-aslas {
	margin-block: 2rem;
	& .v-cat {
		background-color: var(--primary-clr);
		color: var(--white);
		box-shadow: 0 1px 2px 3px var(--primary-clr-opacity-1);
		border-radius: var(--rounded-pill);
		padding: 0.8rem 2rem;
		transition: background-color 300ms ease-in-out;
		&:hover {
			background-color: var(--primary-clr-dark);
		}
	}
}
.v-avatar-images-container {
	display: flex;
	align-items: center;

	& .v-each-av {
		--shift: 1rem;
		border-radius: 50%;
		aspect-ratio: 1/1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		overflow: hidden;
		margin-left: calc(var(--shift) * -0.8);

		&:nth-child(1) {
			background-color: #ffd9a2;
		}
		&:nth-child(2) {
			background-color: #ffc7d6;
		}
		&:nth-child(3) {
			background-color: #dbd1fc;
		}
		&:nth-child(4) {
			background-color: #bef0c6;
		}
	}
	& + .v-text {
		font-size: 0.85rem;
	}
}
.v-sdasad {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	background-color: var(--white);
	position: relative;

	& .v-links {
		margin: 1rem 0;
	}
	.v-links a {
		font-size: 0.8rem;
		padding: 0.7rem 1.4rem;
		font-weight: 500;
		border-radius: var(--rounded-pill);

		&.v-free-trial {
			color: var(--black-opacity-1);
			border: 1px solid var(--border-clr);

			&:hover {
				background-color: var(--primary-clr-opacity-1);
				color: var(--primary-clr-dark);
			}
		}
		&.v-buy-template {
			background-color: var(--primary-clr);
			color: var(--white);
			box-shadow: 0 1px 2px 3px var(--primary-clr-opacity-1);
			gap: 10px;
			display: flex;
			align-items: center;

			& svg {
				--size: 1.2rem;
				height: var(--size);
				width: var(--size);
			}

			&:hover {
				background-color: var(--primary-clr-dark);
			}
		}
	}
}