body {
    background-color: rgba(50, 50, 50, 1);
}

article {
    max-width: 94%; /*var(--maxWidth);*/
    width: var(--maxWidth);
}

article h2 {
    /*border: 1px solid red;*/
    padding: 5% 0 0 0;

    text-align: center;
}

article p {
    padding: 1%;
}

#upgradeDiv {
    margin: 0 auto;

    vertical-align: top;
    text-align: center;
} 

#upgradeCols {
    max-width: var(--maxWidth);

    margin: 1%;

    text-align: center;
}

#customPCDiv {
    margin: 0 auto;

    text-align: center;
} 

#custPCCols {
    max-width: var(--maxWidth);

    margin: 1%;

    text-align: center;
}

.roundedRec {
    width: 100%;

    margin: 0 0 1% 0;
    border: 1px solid white;
    border-radius: 13px;
}

.roundedRec h3 {
    margin: 2% 0 0 0;

    text-align: center;
}

@media (min-width: 720px) {
    article h2 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1080px) {
    article {
        display: inline-block;

        padding-bottom: 5rem;
    }

    #upgradeDiv {     
        max-width: 40%;

        margin-left: 10%;
    }

    #customPCDiv {
        max-width: 40%;
    }
}

/* Swap to two column layout */
@media (min-width: 1385px) {
    #upgradeDiv {     
        max-width: 35%;

        margin-left: 14%;
    }

    #customPCDiv {
        max-width: 35%;
    }
}

/* For ultra wide monitors */
@media (min-width: 2560px) {
    #upgradeDiv {     
        max-width: 27%;

        margin-left: 23%;
    }

    #customPCDiv {
        max-width: 27%;
    }
}