/* ============================================================
   lib/styles/components/features_grid.css
   Structural CSS for the FeaturesGrid component.
   Visuals and colors are inherited from sections.css.
   Note: FeatureCard specific CSS was extracted to feature_card.css in Phase 3.
   ============================================================ */

.features-grid-section__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Right-side visual positioning boundaries */
.features-grid-section__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.features-grid-section__visual-inner {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
}

/* Responsive Overrides */
@media screen and (max-width: 1023px) {
    .features-grid-section__content {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .features-grid-section__visual {
        min-height: 300px;
    }
}