@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 h4 {
        width: 100%;
    }

    .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: 7% 16%;
        bottom: 0;
    }

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

    .Sketch .spacer img.sketch3 {
        scale: .7;
        translate: 23% -13%;
        right: 0;
    }

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

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

@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: #eee;
    }

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

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

    .WaterFlow .timeline .spacer section p {
        line-height: 1.5;
    }

    .WaterFlow .timeline .spacer section .cntnt,
    .WaterFlow .timeline .spacer .video {
        width: 40%;
    }

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

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

    #LGA1851,
    .LGA1851 {
        padding: 0 2.5rem;
    }

    .LGA1851 section {
        flex-direction: column;
    }

    .LGA1851 section .text {
        width: 650px;
    }

    .LGA1851 section .text h4,
    .LGA1851 section .text p {
        text-align: center;
    }

    .LGA1851 section .img {
        width: 100%;
    }

    .LGA1851 section .img img {
        max-width: 460px;
    }
}

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

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

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

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

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

    .InnerGIGABYTEContent .dots {
        display: none;
    }

    .WaterFlow .timeline .spacer .video {
        width: 35%;
    }

    .WaterFlow .timeline .spacer {
        gap: 2rem;
    }

    .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%;
    }

    .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;
    }

    #GLRY,
    .GLRY {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'GLRY1 GLRY2' 'GLRY3 GLRY3';
    }

    .GLRY div:nth-child(1) {
        grid-area: GLRY1;
    }

    .GLRY div:nth-child(2) {
        grid-area: GLRY2;
    }

    .GLRY div:nth-child(3) {
        grid-area: GLRY3;
    }

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

    .WaterFlow .timeline {
        height: unset;
    }

    .WaterFlow .timeline .spacer {
        height: unset;
        gap: 3rem;
    }

    .WaterFlow .timeline .spacer .text {
        gap: 1rem;
    }

    .WaterFlow .timeline .spacer section {
        flex-direction: column;
        gap: 3rem;
    }

    .WaterFlow .timeline .spacer section .cntnt {
        width: 100%;
        gap: 3vh 2rem;
        grid-template-columns: 40% 55%;
    }

    .WaterFlow .timeline .spacer section .cntnt div p {
        line-height: 1;
    }

    .WaterFlow .timeline .spacer section .cntnt div:nth-child(odd) p {
        font-size: 2rem;
    }

    .WaterFlow .timeline .spacer .video {
        width: 50%;
    }

    #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) {
    .KeyVisual>img:nth-child(1) {
        filter: brightness(0.5);
    }

    .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;
    }

    .HWiNFO>div .text {
        grid-auto-flow: row;
        gap: 0;
    }

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

    .WaterFlow .timeline .spacer .video {
        width: 100%;
    }

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

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

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

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

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