@media (orientation: portrait) {

    #KeyVisual,
    .KeyVisual {
        overflow: hidden;
        flex-direction: column;
        padding: 10vh 0;
    }

    .KeyVisual>img:nth-child(1) {
        position: absolute;
    }

    .KeyVisual>img:nth-child(2) {
        position: relative;
    }

    .KeyVisual>.text {
        position: relative;
        bottom: unset;
        padding: 0 2.5rem;
        margin: unset;
    }

    .KeyVisual>.text h3 {
        font-size: 5vh;
    }

    .KeyVisual>.text p {
        font-size: 1rem;
    }

    .Sketch .spacer img:not(.svg) {
        object-fit: cover;
        width: unset;
        height: 100%;
    }

    .Sketch .spacer img.sketch1 {
        scale: .7;
        translate: -24% 14%;
        bottom: 0;
    }

    .Sketch .spacer img.sketch2 {
        scale: .7;
        translate: 5% -33%;
        top: 0;
    }

    .Sketch .spacer img.sketch3 {
        scale: .7;
        translate: 21% 15%;
        right: 0;
    }

    .Sketch .spacer img.sketch4 {
        scale: .5;
        translate: -26% 11%;
        left: 0;
    }

    .Sketch .spacer img.sketch5 {
        scale: 0;
    }

    
    #Gallery,
    .Gallery {
        padding: 10vw 0;
    }

    .Gallery>div {
        flex-direction: column-reverse;
        min-height: unset;
    }

    .Gallery>div.imgs {
        overflow: hidden;
        justify-content: flex-end;
        width: 70%;
    }

    .Gallery>div.imgs img {
        width: 100%;
        margin-left:0px; 
        margin-bottom: 10%;
    }
    
}

@media screen and (max-width:1600px) {

    #KeyFeature,
    .KeyFeature {
        padding: 0 5rem;
    }

    .KeyVisual>.text h3 {
        font-size: 6vh;
    }

    .InnerGIGABYTEContent h3 {
        font-size: 2rem;
    }

    .KeyVisual>.text p {
        font-size: 1.2rem;
        color: #111;
    }

    .DIY .spacer>.fans .imgs img {
        max-height: 400px;
    }

    .LCD>div .img {
        max-width: 500px;
    }

    .AirFlow>img {
        height: 100%;
        width: auto;
    }

    .RGB section {
        padding: 7.5vw 8vw;
    }
}

@media screen and (max-width:1366px) {

    #KeyFeature,
    .KeyFeature {
        padding: 0 5rem;
    }

    .KeyFeature>div .img {
        width: 100%;
    }

    #Cable_Chain,
    .Cable_Chain {
        padding: 20vh 2.5rem;
    }
    
    .Cable_Chain section img {
        width:60%;
        height:100%;
    }

    #DIY,
    .DIY {
        height: 350vh;
    }

    .DIY .spacer>.fans .imgs {
        width: 100%;
    }

    .RGB section .interaction {
        padding: 0 2.5rem 0 0;
    }

    .InnerGIGABYTEContent .dots {
        display: none;
    }

    .AirFlow>.imgs {
        max-width: 1000px;
    }

    .AirFlow .fan .imgs {
        max-width: 400px;
    }
}

@media screen and (max-width:1024px) {
    .InnerGIGABYTEContent h3 {
        font-size: 1.5rem;
        line-height: 1.5;
        letter-spacing: 2px;
        word-spacing: 2px;
    }

    .InnerGIGABYTEContent h4 {
        font-size: 1rem;
        line-height: 1.5;
    }

    .InnerGIGABYTEContent h5 {
        font-size: 1rem;
        line-height: 1.5;
    }

    .InnerGIGABYTEContent p,
    .InnerGIGABYTEContent a,
    .InnerGIGABYTEContent ul,
    .InnerGIGABYTEContent li {
        font-size: .9rem;
        line-height: 1.8;
    }

    #KeyFeature,
    .KeyFeature {
        padding: 10vh 2.5rem;
    }

    .KeyFeature>div {
        flex-direction: column-reverse;
        min-height: unset;
    }

    .KeyFeature>div .text {
        width: 100%;
    }

    .KeyFeature>div .img {
        width: 100%;
    }

    #Cable_Chain,
    .Cable_Chain {
        padding: 10vh 2.5rem;
    }

    .Cable_Chain section {
        flex-direction: column-reverse;
        min-height: unset;
    }

    .Cable_Chain>div .text {
        width: 100%;
    }

    .Cable_Chain>div section .img {
        width: 100%;
    }

    .Cable_Chain section img {
        width:100%;        
    }

    
    .Cable_Chain section .text {
        max-width: none;     
    }


    .KeyVisual>.text {
        gap: 1rem;
    }

    .KeyVisual>.text h3 {
        font-size: 5vh;
    }

    #DIY,
    .DIY {
        height: 400vh;
    }

    .DIY .spacer {
        gap: 0;
    }

    .DIY .spacer>.fts {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 0 2.5rem;
    }

    .DIY .spacer>.fts .title {
        max-width: 500px;
        width: 100%;
        justify-content: flex-start;
    }

    .DIY .spacer>.fts .cntnt {
        max-width: 500px;
        display: flex;
        flex-direction: column;
    }

    .DIY .spacer>.fts .cntnt aside {
        display: flex;
        flex-direction: column;
    }

    #LCD,
    .LCD {
        padding: 5rem 2.5rem;
    }

    .LCD>div .img img {
        pointer-events: none;
    }

    .LCD>div {
        min-height: unset;
        flex-direction: column;
        gap: 1vh;
    }

    .LCD>div .text ul li {
        align-items: flex-start;
    }

    #AirFlow,
    .AirFlow {
        padding: 10vh 2.5rem;
    }

    .AirFlow .text {
        margin: 0;
    }

    .AirFlow .fan {
        flex-direction: column-reverse;
        margin: 0;
    }

    .AirFlow>img {
        width: auto;
        height: 100%;
    }

    #RGB,
    .RGB {
        padding: 10vh 0;
    }

    .RGB .text {
        padding: 0 2.5rem;
    }

    .RGB section {
        flex-direction: column;
    }

    :root {
        --RGBbtnWidth: 50px;
        --RGBbtnTextSize: .6rem;
    }

    .RGB section .interaction {
        padding: 0 2.5rem;
    }

    .RGB section .interaction .btns {
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }

    #HWiNFO,
    .HWiNFO {
        padding: 10vh 5rem;
    }

    #COMPATIBILITY,
    .COMPATIBILITY {
        padding: 10vh 5rem;
    }

}

@media screen and (max-width: 960px) {
    .DIY .spacer>.fans .imgs img {
        width: 100%;
        max-height: unset;
        height: unset;
    }

    .DIY .spacer>.fts .title h3 {
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    .RGB section .interaction .btns {
        grid-template-columns: repeat(4, 1fr);
    }

    #RGB,
    .RGB {
        gap: 5rem;
    }

    .RGB section {
        gap: 2rem;
    }

    .COMPATIBILITY .text .imgs {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 414px) {
    .RGB section .interaction .btns {
        grid-template-columns: repeat(3, 1fr);
    }

    .COMPATIBILITY .text .imgs div {
        flex-direction: column-reverse;
    }

    .COMPATIBILITY .text .imgs div p {
        position: relative;
        border: unset;
        border-radius: unset;
        left: unset;
        bottom: unset;
        padding: 4px 0;
    }

    .AirFlow>.imgs {
        padding: 5rem 0 5rem 0;
    }

    .AirFlow .fan .imgs {
        width: 70%;
    }

    .RGB section>img {
        height: 120%;
    }

    .COMPATIBILITY .title>img {
        height: 110%;
    }
}