@media screen and (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 0.5rem;
    }
    .nav_menu_container {
        display: block;
    }
    .nav_menu_item_hidden_mobile {
        display: none;
    }
    .particles_container {
        height: 12rem;
    }
    .teaser_headline {
        font-size: 1.2rem;
    }
    .content {
        margin: 5rem 1rem 1rem 1rem;
    }
    .full_player_container {
        margin: 0 0 7rem 0;
    }
    .chapter-marker {
        height: calc((2 + 1.5 * (mod(var(--index) + 1, 2))) * 1rem);
    }
    .about_us_section {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 460px) {
    .chapter-marker {
        height: calc((2 + 1.5 * (mod(var(--index) + 2, 3))) * 1rem);
    }
}

@media screen and (max-width: 350px) {
    .chapter-marker {
        height: calc((2 + 1.5 * (var(--index) - 1)) * 1rem);
    }
}