/* ============================================================================================
	FEATURED FRONT SECTION 3 / PATTERN
============================================================================================ */
.resola-front-section-sentence-3 {
    position: relative;
    max-width: 1200px;
    margin: 0 auto
}
.resola-front-section-image-3 {
    position: relative;
    z-index: 1;
    width: 80%
}
.resola-front-section-image-3:first-of-type {
    margin: -5em auto 0
}
.resola-front-section-image-3:nth-of-type(2) {
    margin: -3em 0 0
}
.resola-front-section-image-3:last-of-type {
    margin: -3em 0 0 auto
}
@keyframes circleTurn3{from{opacity:.1;transform:rotate(-90deg)}to{opacity:.6;transform:rotate(0deg)}}
.resola-link-food {
	opacity: .6;
    position: absolute;
	z-index: 3;
    top: calc(100% - 9em);
	left: 4%;
    width: 40vw;
	max-width: 180px;
    aspect-ratio: 1/1;
	border-radius: 50%;
	background: rgba(255,255,255,.6);
	transform-origin: center;
	animation: circleTurn3 linear both;
	animation-timeline: view();
	animation-range: entry 0% cover 60%;
}
@media screen and (min-width: 768px) {
    .resola-front-section-sentence-3 {
        width: 70%
    }
    .resola-front-section-image-container-3 {
        display: flex;
        gap: 0 6%;
        position: relative;
        z-index: 1;
        width: 90%;
        margin: 0 auto
    }
    .resola-front-section-image-3 {
		opacity: 0;
		flex: 1;
		min-width: 0;
        margin: -5em 0 0 !important;
		transform: translateY(50%);
		transition: 1.2s
    }
    .resola-front-section-image-3:first-of-type {
        transition-delay: .3s
    }
    .resola-front-section-image-3:nth-of-type(2) {
        margin-top: -9em !important;
        transition-delay: .4s
    }
    .resola-front-section-image-3:last-of-type {
        margin-top: -15em !important;
        transition-delay: .5s
    }
	.observe_is_active .resola-front-section-image-3 {
		opacity: 1;
		transform: translateY(0)
	}
    .resola-link-food {
        top: -6em;
        left: 2em
    }
}
@media screen and (min-width: 1200px) {
    .resola-link-food {
        top: 6%;
        left: -8em
    }
}

.resola-front-section-3 {
    position: relative
}
.resola-front-section-3::before {
    content: "Private Villa";
    display: block;
    position: absolute;
    top: -15%;
    left: 0;
    z-index: -1;
    width: 100%;
    color: rgb(240,240,240);
    font: clamp(78px, 23vw, 180px)/1 var(--wp--preset--font-family--mincho)
}