@media (max-width: 1280px) {
    #play-button {
        scale: 0.9;
    }
}

@media (max-width: 920px) {
    #play-button {
        scale: 0.75;
    }
}

@media (max-width: 640px) {
    #play-button {
        scale: 0.5;
    }

}

@media (orientation: portrait) {

    /* = Phone Portrait = */

    .extras-project {
        flex-direction: column;
        grid-column: 1;
    }

    .main-frame-extras {
        grid-template-columns: 100%;
        grid-auto-rows: 35%;
        grid-area: 2 / 2 / 6 / 9;
        padding: 5% 5%;
        row-gap: 5%;
    }

    .extras-project-description {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 1% 2%;
        font-size: 2cqh;
        white-space: nowrap;
    }

    /* SoundDesign */
    .main-frame-extras-sound-design {
        grid-template-rows: 5% 25% 5% 30% 30% 5%;
        grid-area: 2 / 2 / 6 / 9;
    }

    #play-button,
    .center {
        grid-area: 2 / 2 / 4 / 5;
    }

    #video-text {
        display: flex;
        align-items: center;
        grid-area: 5 / 2 / 6 / 5;
        background: rgba(0, 0, 0, 0.35);
        font-size: 1.5cqh;
    }


    #next-item {
        justify-self: flex-end;
    }

    #previous-item {
        justify-self: flex-start;
    }

    #exit-container-extra {
        scale: 0.8;
        transform: translate(50%, -50%);
        z-index: 5;
    }
}