.feature-section {
	padding-top: var(--padding-top, 50px);
    padding-bottom: var(--padding-bottom, 50px);
    padding-left: 40px;
    padding-right: 40px;
}

.feature-section__inner {
	display: flex;
    gap: 200px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: center;
}

.feature-section__content, .feature-section__media {
	width: 50%;
}

.feature-section__content {
	display: flex;
    gap: 50px;
    flex-direction: column;
}

.feature-section__media {
	background: url(/wp-content/uploads/2026/01/feature-section-img-bg-opacity.svg);
    background-size: 82%;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

/* Wrapper: row layout */
.feature-section__caption-block {
    display: flex;              /* arrow + text side by side */
    align-items: center;        /* vertically center arrow with caption text */
    column-gap: 20px;           /* gap between caption and arrow */
    position: relative;
    z-index: 2;
    padding-left: 100px;
}

/* Caption text */
.feature-section__caption-text {
    flex: 1; /* takes remaining space */
    max-width: 250px;
    order: 2;
}

/* Arrow */
.feature-section__caption-arrow {
    display: flex;
    align-items: center;        /* vertically center along caption text */
    margin-bottom: -95px;       /* arrow dips 50px into image */
    z-index: 3;                 /* above image */
    order: 1;
}

.feature-section__caption-arrow img {
    height: 100%;               /* arrow grows with caption height */
    width: auto;
    object-fit: contain;
}

/* Optional: image wrapper */
.feature-section__image-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.33);
    backdrop-filter: blur(30px) brightness(1.12);
    -webkit-backdrop-filter: blur(30px) brightness(1.12);
}

/* Image itself */
.feature-section__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1400px) and (min-width: 1025px) {

	.feature-section__inner {
    	gap: 100px;
    }

}

@media (max-width: 1024px) {

	.feature-section__inner {
    	flex-direction: column;
        gap: 100px;
    }
    
    .feature-section__content, .feature-section__media {
    	width: 100%;
    }
    
    .feature-section__media {
    	background: none;
    }
    
    .feature-section__media::before {
    	content: ""; /* required for pseudo-element to appear */
    	position: absolute;
    	top: 0;
    	left: -60px;
    	width: 100%;
    	height: 100%;
    	background-image: url(/wp-content/uploads/2026/01/feature-section-img-bg-opacity-mob.png);
        background-size: 82%;
    	background-repeat: no-repeat;
    	background-position: left center;
        z-index: -1;
        opacity: 0.6;
    }
    
    .feature-section__image-wrapper {
    	background: none;
    	backdrop-filter: none;
    	-webkit-backdrop-filter: none;
    }

}

@media (max-width: 767px) {

	.feature-section__inner {
        gap: 80px;
    }

	.feature-section {
    	padding-top: var(--padding-top-mobile, 30px);
    	padding-bottom: var(--padding-bottom-mobile, 30px);
    	padding-left: 20px;
    	padding-right: 20px;
    }
    
    .feature-section__caption-block {
    	padding: 0 0 10px 30px;
    }
    
    .feature-section__caption-arrow {
    	margin-bottom: -45px;
    }
    
    .feature-section__media::before {
    	background-position: 0 10px;
        left: -20px;
    }

}