.collage--landing-3 {
	position: relative;
	background-color: var(--g6);
	padding-block: 10rem 4rem;
	padding-inline: var(--pd2);
	@media (max-width:767px) {
		padding-block: 8rem 4rem;
	}
	& .bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			background-color: var(--main);
			opacity: .1;
		}
		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	& .cont {
		display: flex;
		flex-direction: column;
		width: 60%;
		position: relative;
		z-index: 2;
		padding-left: 4rem;
		gap: 3rem;
		& .ttl {
			margin: 0;
			padding: 0;
			font-size: 2.5rem;
			color: var(--bg);
			font-weight: 400;
			line-height: 140%;
    		letter-spacing: .1rem;
		}
		& .desc {
			color: var(--bg);
			font-size: 1rem;
			line-height: 160%;
			font-weight: 400;
		}
		& .list {
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
			& .item {
				flex: 0 0 calc(100% / 2 - 2rem * 1 / 2);
				display: flex;
				align-items: flex-start;
				gap: 1rem;
				& .check {
					background-color: var(--bg);
					width: 3rem;
					height: 3rem;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					svg {
						height: 1.5rem;
						fill: var(--main);
					}
				}
				& .txt {
					width: calc(100% - 4rem);
					color: var(--bg);
					font-weight: 300;
					font-size: .8rem;
					& strong {
						font-size: 1rem;
						color: var(--bg);
					}
				}
			}
		}
		& .btns {
			display: flex;
			gap: 2rem;
			& .btn {
				text-decoration: none;
				background-color: var(--g5);
				display: flex;
				align-items: center;
				gap: 1rem;
				padding: 1rem 1.5rem;
				font-size: 1.2rem;
				border-radius: 2rem;
				& svg {
					height: 1.5rem;
					fill: var(--g1);
				}
				& span {
					color: var(--g1);
				}
				&:hover {
					background-color: var(--g6);
				}
			}
			& .main-btn {
				background-color: var(--main);
				border: var(--px) solid var(--main);
				color: var(--bg3);
				& span {color: var(--bg);}
				&:hover {
					background-color: var(--main-dark);
					border-color: var(--main-dark);
				}
			}
			& .whatsapp-btn {
				border: var(--px) solid transparent;
				background-color: transparent;
				color: var(--bg);
				& span {color: var(--bg);}
				& svg {
					fill: var(--whatsapp);
				}
				&:hover {
					background-color: var(--whatsapp);
					border-color: var(--whatsapp);
					& span {color: var(--g6);}
					svg {
						fill: var(--g6);
					}
				}
			}
		}
		@media (max-width: 767px) {
			width: 100%;
			padding-left: 0;
			gap: 2rem;
			& .ttl {
				font-size: 1.6rem;
			}
			& .list {
				& .item {
					flex: 0 0 100%;
				}
			}
			& .btns {
				flex-direction: column;
				align-items: center;
				gap: 1rem;
				& .btn {
					padding: .5rem 1rem;
					border-radius: 1rem;
				}
				& .whatsapp-btn {
					background-color: transparent;
					color: var(--bg);
					font-size: .9rem;
					& svg {
						fill: var(--whatsapp);
						height: 1rem;
					}
					&:hover {
						border-bottom: var(--px) dashed var(--whatsapp);
					}
				}
			}
		}
	}
	&.short {
		& .bg:before {
			background-color: var(--g6);
			opacity: .7;
		}
		& .cont {
			width: 100%;
			padding-left: 0;
			& h1, & .desc {
				text-align: center;
			}
		}
	}
}