@media (max-width: 480px) {

    .layout {
        min-height: calc(100dvh - 110px - var(--footer-h));
    }

    main {
        margin-left: var(--sidebar-collapsed) !important;
        padding: 6px 0.75rem 0.5rem;
        height: 100%;
        overflow-x: hidden;
    }

    body:not(.sidebar-closed) main {
        margin-left: var(--sidebar-collapsed) !important;
    }

    .main-artwork {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 110px - var(--footer-h) - 120px);
        aspect-ratio: 3 / 4;
    }

    .thumbnail-section {
        width: 100%;
        max-width: 100%;
    }

    .black-box {
        display: none;
    }

    .lightbox-arrow {
        display: none;
    }
}

@media (max-width: 900px) and (orientation: landscape) {

    body {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .layout {
        min-height: calc(100dvh - var(--header-h));
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    main {
        margin-left: var(--sidebar-collapsed) !important;
        padding: 4px 0.75rem 2rem;
        overflow: visible;
        height: auto;
        width: calc(100vw - var(--sidebar-collapsed));
        box-sizing: border-box;
    }

    body:not(.sidebar-closed) main {
        margin-left: var(--sidebar-collapsed) !important;
    }

    .main-artwork {
        max-width: 420px;
        width: 100%;
        max-height: none;
        aspect-ratio: 3 / 4;
    }

    .thumbnail-section {
        max-width: 100%;
    }

    .black-box {
        display: none;
    }
}