@media (max-width: 1024px) {
    :root {
        --container-padding: 20px;
    }

    .hero__container,
    .index-section__grid,
    .index-section__grid--reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero__media,
    .index-section__visual {
        min-height: 340px;
    }

    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .album-layout {
        grid-template-columns: 1fr;
    }

    .album-cover-card {
        position: static;
        max-width: 420px;
    }
}

@media (max-width: 760px) {
    :root {
        --container-padding: 16px;
        --header-height: 68px;
    }

    h1 {
        font-size: clamp(38px, 12vw, 58px);
    }

    h2 {
        font-size: clamp(28px, 9vw, 42px);
    }

    .hero {
        padding: 48px 0 64px;
    }

    .hero__actions,
    .album-header__actions {
        width: 100%;
    }

    .hero__actions .button,
    .album-header__actions .button {
        width: 100%;
    }

    .hero__media,
    .index-section__visual {
        min-height: 260px;
    }

    .index-section {
        padding: 56px 0;
    }

    .dashboard-header,
    .album-header,
    .form-card__header--row {
        flex-direction: column;
    }

    .dashboard-metrics,
    .dashboard-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: 26px 20px;
    }

    .legal-page,
    .dashboard-page,
    .album-page {
        padding: 36px 0 64px;
    }

    .form-card,
    .dashboard-panel,
    .legal-content section {
        padding: 20px;
    }

    .track-card__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .button {
        justify-content: center;
        width: 100%;
    }

    .metric-card {
        padding: 18px;
    }

    .album-cover-card {
        padding: 16px;
    }
}