Icon Feature Boxes Grid

<?php
if ( ! function_exists( 'scseed_feature_boxes_shortcode' ) ) {

    function scseed_feature_boxes_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'columns' => '3',
            'style'   => 'card',
        ), $atts, 'scseed_feature_boxes' );

        $cols  = max( 1, min( 6, intval( $atts['columns'] ) ) );
        $style = in_array( $atts['style'], array( 'card', 'minimal' ), true ) ? $atts['style'] : 'card';

        $boxes = apply_filters( 'scseed_feature_boxes', array(
            array(
                'icon_html'   => '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>',
                'title'       => 'Lightning Fast',
                'description' => 'Optimised for speed at every layer, from database queries to front-end delivery.',
            ),
            array(
                'icon_html'   => '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
                'title'       => 'Secure by Default',
                'description' => 'Enterprise-grade security baked in, so your data stays safe without extra effort.',
            ),
            array(
                'icon_html'   => '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
                'title'       => '24/7 Uptime',
                'description' => 'Our globally distributed infrastructure guarantees 99.9% availability around the clock.',
            ),
            array(
                'icon_html'   => '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
                'title'       => 'Team Collaboration',
                'description' => 'Invite teammates, assign roles, and collaborate in real time without friction.',
            ),
            array(
                'icon_html'   => '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
                'title'       => 'Deep Analytics',
                'description' => 'Track every metric that matters with beautiful charts and actionable insights.',
            ),
            array(
                'icon_html'   => '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
                'title'       => 'Cross-Platform',
                'description' => 'Works seamlessly on desktop, tablet, and mobile without any configuration.',
            ),
        ) );

        ob_start();
        ?>
        <div class="scseed-fb-grid" data-style="<?php echo esc_attr( $style ); ?>" style="--fb-cols:<?php echo esc_attr( $cols ); ?>">
            <?php foreach ( $boxes as $box ) :
                $icon  = isset( $box['icon_html'] )   ? $box['icon_html']   : '';
                $title = isset( $box['title'] )       ? $box['title']       : '';
                $desc  = isset( $box['description'] ) ? $box['description'] : '';
            ?>
            <div class="scseed-fb-item">
                <?php if ( $icon ) : ?>
                <div class="scseed-fb-icon"><?php echo $icon; ?></div>
                <?php endif; ?>
                <h3 class="scseed-fb-title"><?php echo esc_html( $title ); ?></h3>
                <p class="scseed-fb-desc"><?php echo esc_html( $desc ); ?></p>
            </div>
            <?php endforeach; ?>
        </div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'scseed_feature_boxes', 'scseed_feature_boxes_shortcode' );
}

.scseed-fb-grid {
    display: grid;
    grid-template-columns: repeat(var(--fb-cols, 3), 1fr);
    gap: 1.5rem;
}

.scseed-fb-item {
    padding: 1.75rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-align: center;
    background: #ffffff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.scseed-fb-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.scseed-fb-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: #f5f3ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #7c5cff;
}

.scseed-fb-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.scseed-fb-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
}

.scseed-fb-desc {
    margin: 0;
    font-size: 0.875rem;
    color: #555555;
    line-height: 1.6;
}

[data-style="minimal"] .scseed-fb-item {
    border: none;
    border-top: 3px solid #7c5cff;
    border-radius: 0;
}

@media (max-width: 600px) {
    .scseed-fb-grid {
        --fb-cols: 1;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .scseed-fb-grid {
        --fb-cols: 2;
    }
}