/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    /* Header */

    header {
        padding:
            16px 12px;
    }


    /* Main */

    main {
        padding:
            25px 12px 50px;
    }


    /* Heading */

    h1 {
        font-size: 21px;
    }


    /* Browser */

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

    .item {
        padding:
            16px;
    }


    /* Info */

    .info-section {
        padding:
            16px;
    }

    .info-table td:first-child {
        width:
            40%;
    }


    /* Jobs */

    .job-panel {
        right: 12px;
        bottom: 12px;

        width:
            calc(100vw - 24px);

        max-width:
            calc(100vw - 24px);
    }


    /* Player */

    .player-title {
        font-size:
            18px;
    }

    .player-controls {
        gap:
            4px;
    }
}


/* =========================================================
   BROWSER TRANSITION — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #browser {
        transition:
            none;
    }
}