/* ============================================================================================
	FEATURED SQUARE IMAGE 2 / PATTERN
============================================================================================ */
.resola-two-column-image {
    display: flex;
    position: relative
}
.resola-two-column-image-item {
    position: relative;
    width: 50%
}
.resola-two-column-image-text-wrapper {
    position: absolute;
    top: -1em;
    display: flex;
    align-items: center;
    height: 2em;
    font-size: clamp(34px, 6vw, 120px);
    filter: grayscale(1)
}
.resola-two-column-image-text {
    opacity: 0;
    font-size: clamp(34px, 6vw, 120px);
    line-height: 1;
    transform: translateY(-50%);
    transition: opacity 1s, transform 1s
}
.resola-two-column-image-item:first-of-type .resola-two-column-image-text-wrapper {
    left: 20%;
    padding-right: 1em;
    background: url('../images/resola-sun.webp') center right /auto 100% no-repeat;
}
.resola-two-column-image-item:nth-of-type(2) .resola-two-column-image-text-wrapper {
    right: 20%;
    padding-left: 1em;
    background: url('../images/resola-moon.webp') center left /auto 100% no-repeat;
}
.resola-two-column-image-item:nth-of-type(2) .resola-two-column-image-text {
    transition-delay: .2s
}
.observe_is_active .resola-two-column-image-text {
    opacity: 1;
    transform: translateY(0)
}
.resola-two-column-image-item:first-of-type .resola-two-column-image-text {
    left: 20%
}
.resola-two-column-image-item:nth-of-type(2) .resola-two-column-image-text {
    right: 20%;
    background: linear-gradient(to top, var(--wp--preset--color--white) 0%, white .5em, var(--wp--preset--color--contrast) .5em, var(--wp--preset--color--contrast) 1em);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}