/* Tablet & Desktop */
@media (min-width: 768px) {}


@media screen and (max-width: 520px) and (orientation: portrait) {
    .retake_btn_bx {
        margin: 0 auto;
    }

    .camera::after {
        background-size:
            35px 3px,
            3px 35px,
            35px 3px,
            3px 35px,
            35px 3px,
            3px 35px,
            35px 3px,
            3px 35px;
    }

    .picture-capture-sec .camera,
    .picture-capture-sec .picture-output {
        width: 70vw;
    }

    .btn {
        min-width: 140px;
        padding: 10px 25px;
        font-size: 1.2rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1.1rem;
    }

    .options-container {
        gap: 10px;
        width: 90%;
        margin-bottom: 3vh;
    }

    .option-item {
        padding: 5px 10px;
    }

    .option-label {
        font-size: 1rem;
    }

    .check-circle {
        width: 30px;
        height: 30px;
    }

    input[type="text"] {
        width: 90%;
        padding: 5px 20px;
        font-size: 1.2rem;
        margin-bottom: 10rem;
    }

    label {
        font-size: 1.4rem;
    }

    #step-art h1 {
        margin-top: 5vh;
    }

    .art-grid {
        width: 96%;
        gap: 10px;
        margin-bottom: 6vh;
    }

    .prompt-box {
        width: 90%;
    }

    .prompt-text {
        font-size: 0.8rem;
        margin-bottom: auto;
    }

    .loading-text-dynamic {
        width: 65%;
        font-size: 1rem;
    }

    .loading-text {
        font-size: 12px;
    }

    .progress-track {
        height: 25px;
    }

    .frame-bx {
        width: 65%;
    }

    .image-holder {
        width: 74%;
        height: 75%;
    }

    .image-credit {
        width: 88%;
    }

    .gemini-credit-icon {
        width: 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
    .frame-bx {
        width: 50%;
    }

    .image-holder {
        width: 74%;
        height: 75%;
    }

    .image-credit {
        width: 68%;
        font-size: 0.8rem;
    }

    #opts-lang {
        height: 45vh;
    }


}

/* @media screen and (min-width: 1181px) and (max-width: 1920px) { */
@media screen and (min-width: 1181px) {
    /* #app {
        max-width: 450px;
    } */

    h1 {
        margin-bottom: 7vh;
    }

    p,
    input[type="text"] {
        margin-bottom: 10vh;
    }

    #opts-lang {
        height: 42vh;
    }

    .options-container {
        width: 35%;
    }

    .art-grid {
        width: 30%;
        margin-bottom: 10vh;
    }

    .picture-capture-sec .camera,
    .picture-capture-sec .picture-output {
        max-width: 350px;
    }

    #opts-lang {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .frame-bx {
        width: 25%;
    }

    .image-credit {
        width: 76%;
        font-size: 0.7rem;
    }

    .image-holder {
        width: 73%;
        height: 73%;
    }

    .prompt-box {
        width: 21%;
    }

    .progress-border {
        width: 30%;
    }
}