.hero-section {
	padding: 16px;

	display: flex;
	flex-direction: column;
	gap: 16px;

	position: relative;
	overflow: hidden;
	background-position: right;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom: 1px solid var(--l1-border);

	&__icon {
		height: fit-content;
		background-color: var(--l2-background);
		padding: 12px;
		border: 1px solid var(--l3-background);
		border-radius: 6px;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		img {
			width: 100%;
		}
	}

	&__details {
		display: flex;
		flex-direction: column;
		gap: 12px;

		&-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 16px;

			&__icon {
				height: fit-content;
				background-color: var(--l1-background);
				padding: 12px;
				border: 1px solid var(--l2-background);
				border-radius: 6px;
				width: 60px;
				height: 60px;
			}

			&__title {
				color: var(--l1-foreground);
				font-size: 24px;
				font-weight: 500;
				line-height: 20px;
				letter-spacing: -0.12px;
			}
		}

		&__description {
			color: var(--l2-foreground);
		}

		&-title {
			color: var(--l1-foreground);
			font-size: 24px;
			font-weight: 500;
			line-height: 20px;
			letter-spacing: -0.12px;
		}

		&-description {
			color: var(--l2-foreground);
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
		}
	}
}
