.gamesSection {
    display: flex;
    height: calc(250 * var(--pixel));
    justify-content: space-between;
    align-items: flex-start;
    width: calc(419 * var(--pixel));
    margin-bottom: calc(40 * var(--pixel));
}

.box{
    display: grid;
    background-image: url("../images/mainBody/boxCarts2.png");
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: calc(20 * var(--pixel));
    width: calc(175 * var(--pixel));
    height: calc(129 * var(--pixel));
    grid-template-columns: repeat(2,calc(81*var(--pixel)));
    grid-template-rows: repeat(8,calc(15*var(--pixel)));
    grid-column-gap: calc(5*var(--pixel));
    padding: calc(4*var(--pixel));
}

.cartBox, .socialBox {
    display: grid;
    grid-auto-rows: calc(15*var(--pixel));
   }

.cartBox {
    grid-column: 1 / 2;
}

.socialBox {
    grid-column: 2 / 3;
}

.cartBox > img, .socialBox > img {
    height: calc(16*var(--pixel));
    width: calc(81*var(--pixel));
    transition: transform 0.3s ease;
    cursor: pointer;
    image-rendering: pixelated;
}

.cartBox > img:hover, .socialBox > img:hover {
    transform: scale(1.1);
}





.bigCart {
    width: calc(200 * var(--pixel));
    height: calc(250 * var(--pixel));
    perspective: calc(500 * var(--pixel));
 }

.bigCartInner {
    position: relative;
    width: 100%;
    height: 100%;
    /*text-align: center;*/
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.bigCart.is-flipped .bigCartInner {
    transform: rotateY(360deg);
}

.bigCartFront, .bigCartBack {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigCartBack {
    transform: rotateY(180deg);
}

.bigCartFront img, .bigCartBack img {
    image-rendering: pixelated;
    width: calc(200 * var(--pixel));
    height: calc(250 * var(--pixel));
    cursor: pointer;
}