﻿.page-intro-container {
    gap: 10px;
    margin-top: 50px;
}

.page-sections-container {
    gap: 50px;
    padding: 50px 0;
}

.section-row {
    display: flex;
    gap: 50px;
}

    .section-row.reverse {
        flex-direction: row-reverse;
    }

.section-column {
    flex: 1;
}

    .section-column.content {
        padding-top: 0px;
    }

    .section-column.media img {
        max-width: 100%;
        height: auto;
    }

.layout-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 0px;
}

@media (max-width: 768px) {
    .page-sections-container {
        gap: 20px;
    }

    .section-row,
    .section-row.reverse {
        flex-direction: column;
        gap: 20px;
    }

    .section-markdown iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}
