/* Add hero image to the right side */
@media (min-width: 768px) {
    /* Target the hero section */
    section:first-of-type {
        position: relative;
    }
    
    /* Add image container after the hero content */
    section:first-of-type > div:last-child::after {
        content: '';
        position: absolute;
        right: -3%;
        top: 50%;
        transform: translateY(-50%);
        width: 42%;
        height: 339px;
        background-image: url('/assets/hero-dashboards-layered.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 12px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    /* Adjust the content width to make room for the image */
    section:first-of-type .max-w-3xl {
        max-width: 58%;
    }
    
    /* Keep heading on one line */
    section:first-of-type h1 {
        white-space: nowrap;
    }
    
    /* Keep SIVIA at original size, reduce only subtitle by 5% (from 78% to 74.1%) */
    section:first-of-type h1 span[style*="font-size"] {
        font-size: 74.1% !important;
    }
}