@import url('style.css');

.main-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid */
    grid-template-rows: auto auto; /* Stack content vertically */
    gap: 1rem; /* Spacing between sections */
    justify-content: center; /* Center content horizontally */
    padding: 1rem; /* Padding for spacing */
}

.header-content {
    grid-column: 1 / span 11; /* Horizontally centered, spanning 9 columns */
    grid-row: 1;
    background-color: var(--info-content-bg); /* Use variable for background */
    padding: 0.5rem; /* Inner spacing */
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in dimensions */
    word-wrap: break-word; /* Prevent overflow */
}

.blog-content {
    grid-column: 2 / span 9; /* Horizontally centered, spanning 8 columns */
    grid-row: 2;
    background-color: var(--chapter-content-bg); /* Use variable for background */
    padding: 1rem 2rem; /* Inner spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 10px 10px 10px var(--chapter-shadow); /* Shadow using variable */
    box-sizing: border-box; /* Include padding in dimensions */
    word-wrap: break-word; /* Prevent overflow */
    text-indent: 1em; /* Indent the first line */
}

/* Media Queries */
@media (max-width: 768px) {
    .main-content {
        gap: 0; /* Reduce spacing on smaller screens */
    }

    .info-content,
    .chapter-content {
        grid-column: 1 / -1; /* Full width on small screens */
        grid-row: auto; /* Natural stacking */
        width: 100%;
        overflow: visible; /* Ensure no clipping */
        box-shadow: none; /* Remove shadows on smaller screens */
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .info-content,
    .chapter-content {
        grid-column: 1 / -1; /* Span full width */
        grid-row: auto; /* Stack vertically */
        width: 100%;
    }
}