.rhythm-section {
    /* Mimics: bg-gradient-to-br from-white via-rose-50/30 to-sky-100 */
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 241, 242, 0.4) 40%, #e0f2fe 100%);
    padding-top: 5rem;
    padding-bottom: 5rem;
    overflow: hidden; /* prevents blob from causing horizontal scroll */
}

/* --- Image Card & Decoration --- */
.image-wrapper-relative {
    position: relative;
    z-index: 1;
    max-width: 500px;
}

.image-card {
    aspect-ratio: 4 / 5;
    border-radius: 1.5rem; /* rounded-3xl approx */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    background-color: #f8f9fa; /* placeholder bg */
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.decorative-blob {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    width: 16rem;
    height: 16rem;
    /* Mimics: bg-gradient-to-br from-sage-200 to-sky-200 */
    background: linear-gradient(135deg, #d2e3d8, #bae6fd);
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(40px); /* blur-3xl */
    z-index: -1;
}

/* --- Typography --- */
.kicker {
    color: #5c8272;
    font-size: 0.875rem; /* text-sm */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
    font-weight: 600;
    margin-bottom: 1rem;
}

.main-heading {
    color: #2d3f37;
    font-weight: 700;
    font-size: 2.5rem; /* text-4xl */
    margin-bottom: 2rem;
    line-height: 1.2;
}

.text-content {
    color: #3d574d;
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75; /* leading-relaxed */
}

.text-content p {
    margin-bottom: 1.5rem;
    font-size: 500;
}

.quote-text1 {
    color: #2d3f37;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 500;
    margin-top: 1.5rem;
    line-height: 1.4;
}
/* --- Responsive Adjustments --- */
@media (min-width: 768px) {
    .rhythm-section {
        padding-top: 8rem; /* md:py-32 */
        padding-bottom: 8rem;
    }
    .main-heading {
        font-size: 3rem; /* md:text-5xl */
    }
}

/* Adjust column gap for larger screens */
@media (min-width: 992px) {
    .custom-gap {
        column-gap: 4rem; /* gap-16 approx */
    }
}