:root {
    --pdrl5rem: 2.5rem;
}

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

    #smooth,
    .smooth {
        padding: 15rem 0 5rem 0;
    }

    .smooth section div:has(>.text) {
        grid-template-columns: 1fr 1fr;
    }

    .smooth section div:has(>.text) .text {
        padding: 0 var(--pdrl5rem) 0 0;
    }

    #extended,
    .extended {
        padding: 5rem var(--pdrl5rem) 0;
    }
}

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

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

    .InnerGIGABYTEContent p,
    .InnerGIGABYTEContent a,
    .InnerGIGABYTEContent ul,
    .InnerGIGABYTEContent li {
        font-size: 0.9rem;
    }

    .upgrade section>div aside {
        flex-direction: column;
        align-items: center;
    }

    .upgrade section>div .text ul {
        border-left: solid 2px #cccccc00;
    }

    .upgrade section>div .text {
        padding: 0 var(--pdrl5rem);
        flex-direction: column;
    }

    .upgrade section>div:has(>.text) {
        gap: 3rem;
    }

    .upgrade section>div .text h3,
    .upgrade section>div .text p {
        max-width: 500px;
    }

    #smooth,
    .smooth {
        padding: 10rem 0 5rem;
    }

    .smooth section div>br {
        display: none;
    }

    .smooth section div:has(>.text) {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .smooth section div:has(>.text) .text {
        padding: 0 var(--pdrl5rem);
        max-width: 500px;
    }

    .smooth section div:has(>.text) .text h3,
    .smooth section div:has(>.text) .text p {
        text-align: center;
    }

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

    .extended section {
        grid-template-columns: unset;
        gap: 1rem;
        justify-items: center;
        grid-template-rows: minmax(15vw, 20vw);
    }

    .extended section .text {
        padding: 0 var(--pdrl5rem);
        align-items: center;
    }

    .extended section .text h3,
    .extended section .text p {
        text-align: center;
    }

    .extended section div:has(>img) img {
        width: 100%;
    }

    .optimized .text {
        padding: 0 var(--pdrl5rem);
        max-width: 500px;
    }

    .optimized .text h3,
    .optimized .text p {
        text-align: center;
    }
}

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

    .upgrade section>div:has(>.text) {
        gap: 1rem;
        padding: 3rem 0 0 0;
    }

    .upgrade section>div .text {
        gap: 1rem;
    }

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

    #extended,
    .extended {
        padding: 1rem 0;
    }

    .extended section {
        grid-template-rows: minmax(40vw, 45vw);
    }

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

    #dimensions,
    .dimensions {
        padding: 1rem 0 5rem;
    }
}