/* Story Section - Responsive Logo Layout */

/* Mobile: Single column with logo on top */
.story-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.story-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-lg);
}

.story-logo img {
    width: 100%;
    max-width: 300px;
    /* Mobile max width */
    height: auto;
    object-fit: contain;
}

/* Tablet: Side-by-side layout with medium logo */
@media (min-width: 768px) {
    .story-content {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--space-3xl);
    }

    .story-logo img {
        max-width: 350px;
    }
}

/* Desktop: Larger logo for big screens */
@media (min-width: 1024px) {
    .story-content {
        grid-template-columns: 1fr 2fr;
        gap: var(--space-3xl);
    }

    .story-logo img {
        max-width: 400px;
    }
}

/* Large Desktop: Even larger for premium displays */
@media (min-width: 1440px) {
    .story-logo img {
        max-width: 450px;
    }
}