.enum--2 {
	&>div {
		position: relative;
		padding-bottom: 4rem;

		& .image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-repeat: none;
			background-size: cover;
			background-position: center center;

			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				background: var(--bg);
				opacity: .8;
			}
		}

		& .cont {
			position: relative;
			display: flex;
			flex-direction: column;
			padding-top: 4rem;
			padding-inline: var(--pd);
			z-index: 3;

			& .ttl {
				text-align: center;
				max-width: 40rem;
				margin-left: auto;
				margin-right: auto;
				font-size: 2.2rem;
				line-height: 130%;
				font-weight: 400;
				font-family: var(--font-text);
			}

			& .sttl {
				text-align: center;
				width: 60%;
				margin-left: auto;
				margin-right: auto;
				font-size: 1.3rem;
				line-height: 160%;
				font-weight: 400;
				font-family: var(--font-text);

				@media (max-width: 767px) {
					width: 100%;
				}
			}

			& .scrollable {
				padding-top: 4rem;
				overflow: hidden;
				transform: translate(0, -2rem);

				.container {
					transform: translate(0, 2rem);
					display: flex;
					overflow-x: scroll;
					scroll-snap-type: x mandatory;
					padding: 1rem 2rem 3rem 2rem;
					gap: 2rem;
					scroll-padding: 2rem;

					& .item {
						flex: 0 0 calc(40% - 1rem);
						scroll-snap-align: start;
						display: flex;
						flex-direction: column;
						position: relative;
						background-color: var(--bg);
						border: none;
						box-shadow: var(--shad);
						padding: 2rem;

						@media (max-width: 767px) {
							flex: 0 0 100%;
						}

						& .ico {
							position: absolute;
							bottom: 0;
							right: 2rem;
							color: var(--g4);
							font-size: 4rem;
							border: none;
							z-index: 1;
						}

						& .title {
							position: relative;
							z-index: 2;
							font-size: 1.5rem;
							font-weight: 700;
							color: var(--g6);
							margin-bottom: .65rem;
							font-family: var(--font-text);
						}

						& .text {
							position: relative;
							z-index: 2;
							color: var(--g4);
							line-height: 160%;
						}
					}

					@media (max-width:767px) {
						& .item {
							& .title {
								font-size: 1.2rem;
							}
						}
					}
				}
			}

			.scrollable-nav {
				display: flex;
				justify-content: center;
				column-gap: 1rem;
				align-items: center;

				&>div {
					& a {
						display: block;
						text-decoration: none;
						color: var(--main);
						font-size: 1.35rem;
						padding: 0 1rem;
						transition: transform .3s linear;

						& svg {
							fill: var(--main-dark);
							height: 1rem;
						}

						&.left:hover {
							transform: translateX(-.2rem);
						}

						&.right:hover {
							transform: translateX(.2rem);
						}
					}
				}

				&>div.dots {
					display: flex;
					column-gap: .5rem;
					justify-content: center;
					align-items: center;

					& span {
						width: .3rem;
						height: .3rem;
						background-color: var(--g5);
						border-radius: 50%;

						&.active {
							background-color: var(--main);
							width: .4rem;
							height: .4rem;
						}
					}
				}
			}

			@media (max-width:767px) {
				&>div>div:nth-child(2) {
					font-size: 2.2rem;
				}
			}
		}
	}
}