@media screen and (max-width: 1600px) {
    .text1 {
        transform: translate3d(25%, 100%, 0);
        width: 90%;
    }

    .text2 {
        transform: translate3d(-25%, -200%, 0);
        width: 90%;
    }
}

@media screen and (max-width: 1200px) {
    .keyv img {
        width: calc(100% * 2);
    }

    .keyfeature {
        padding: 15vw 10%;
        background-size: cover;
    }

    .keyfeature>div {
        flex-direction: column;
    }

    .keyfeature>div>img {
        width: 100%;
    }

    .InnerGIGABYTEContent>div.glass {
        min-height: 100vh;
        flex-direction: column;
        gap: 5vw;
        justify-content: flex-end;
        padding: 0 0 12vw 0;
    }

    .glass>img {
        width: unset;
        height: 100%;
        margin: 0;
        position: absolute;
    }

    .glass>div {
        position: relative;
    }

    .text1 {
        transform: unset;
        width: 90%;
    }

    .text2 {
        transform: unset;
        width: 90%;
    }

    .rgb-btn-colorpicker {
        flex-direction: column;
        padding: 4.5vw 4vw;
    }

    #wheelPicker {
        display: none;
    }

    .rgb-imgs {
        width: 85vw;
    }

    .vertical {
        padding: 15vw 10%;
        background-size: cover;
    }

    .vertical>div {
        flex-direction: column;
    }

    .utility {
        height: unset;
    }

    .utility-img-bg {
        width: unset;
        height: 100%;
    }

    .utility-container {
        flex-direction: column;
    }

    .utility-text {
        width: 100%;
        padding: 8vh 5vw 0;
    }

    .utility-btn {
        margin: 2vw 0 0 0;
    }

    .utility-imgs {
        width: 120%;
        height: 50vh;
        position: relative;
        padding: 0;
        margin: 3vh 0 5vh 0;
    }

    .io {
        height: unset;
    }

    .io>div {
        flex-direction: column-reverse;
    }

    .io img {
        width: 100%;
        height: unset;
    }

    .io .text {
        padding: 15vw 5vw 0;
    }

    .airflow img {
        width: calc(100% * 1.8);
        height: unset;
    }

    .airflow h3 {
        text-align: center;
    }

    .compatibility .spacer {
        min-height: 300vh;
        display: block;
    }

    .compatibility h3 {
        text-align: center;
    }

    .compatibility .camera {
        position: absolute;
    }

    .compatibility .slider {
        max-width: calc(100vh * .85);
        width: 90%;
        max-height: 80vh;
    }

    .compatibility .slider img {
        position: absolute;
        margin: unset;
        inset: unset;
    }

    .InnerGIGABYTEContent>div.dots {
        display: none;
    }
}

@media screen and (max-width: 960px) {
    .rgb {
        padding: 15vw 5vw;
        background-position: center center;
    }

    .rgb-text {
        gap: 3vw;
    }

    .rgb-learn-more .link {
        padding: 1.5vw 4vw;
    }

    .compatibility .camera {
        gap: 5vw;
    }

    .InnerGIGABYTEContent>div.io {
        height: unset;
        min-height: 100vh;
    }
}

@media screen and (max-width: 700px) {
    .glass>img {
        position: relative;
    }

    .text1,
    .text2 {
        transform: translateY(-50%);
    }

    .rgb-btns>div {
        width: 70px;
    }

    .rgb-btns img {
        width: 50px;
    }

    .utility-text {
        padding: 12vh 5vw 0;
    }

    .utility-btn {
        margin: 4vw 0 0 0;

    }

    .utility-imgs {
        margin: 4vh 0 0 0;
        height: 45vh;
    }

    .utility-imgs img {
        margin: 5vw auto;
    }



    .airflow {
        padding: 20vw 0;
    }

    .compatibility .slider img {
        height: 65vh;
    }

    .compatibility .camera {
        gap: 10vw;
    }
}