/* CARD COMPONENTS */
    .cardCtr {
        display: flex;
        position: relative;
        width: var(--width);
        aspect-ratio: 7/5;
        margin: auto;
        transform-style: preserve-3d;
        perspective: 3000px;
    }
    .cardFront {
        position: fixed;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-color: #c8c8c8;
        transform: rotateX(8deg) translateZ(calc(var(--width) / 100 * 5));
    }
    .cardBack {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: #bab3b3;
        transform: rotateX(352deg) translateZ(calc(var(--width) / 100 * -5));
    }
    .cardEnvelope {
        display:block;
        position: fixed;
        width: 106%;
        height: 105%;
        background-color: #ebe9e8;
        background-image: url(../images/website/envelope.svg);
        background-size: contain;
        background-position: center;
        transform: rotateX(353deg) rotateZ(327deg) translateZ(calc(var(--width) / 100 * -6));
        box-shadow: -1px 2px 6px 0px #afafaf;
    }
    .cardShadow {
        display: block;
        position: fixed;
        height: calc(var(--width) /100 * 20);
        width: 100%;
        background-color: #A3A2A2;
        transform: rotateX(90deg) translateZ(calc(var(--width) / 100 * -60));
        box-shadow: 3px 0px 14px 8px #a3a2a2;
    }
    
/* CARD MODES - (sizes and rotations) */
    .cardCtrDisplay {
        --width: 73vw;
        transform: rotateX(358deg) rotateY(23deg);
    }
    .cardCtrSimilar {
        --width: 60vw;
        transform: rotateX(356deg) rotateY(335deg);
    }
    .cardCtrCart {
        --width: 8rem;
        transform: rotateX(350deg) rotateY(29deg);
    }
    .cardCtrStill {
        --width: 73vw;
        left: -8%;
        transform: rotateX(350deg) rotateY(29deg);
    }
    .cardCtrShelf {
        --width: 77vw;
        transform: rotateX(350deg) rotateY(335deg) rotateY(0deg);
    }
    .cardCtrEnvelope {
        --width: 74vw;
        transform: rotateX(9deg) rotateY(2deg) rotateZ(342deg);
    }

/* ART COMPONENTS */
    .artCtr {
        --width2: calc(var(--width) / 20);  /* Sets size of canvas/frame sides and border */
        --width3: calc(var(--width) / 100);  /* Sets size of picture frame inset shadow */
        --width4: calc(var(--width) / 2.66);  /* Sets top and bottom Z translation */
        --width5: calc(var(--width) / 2.02);  /* Sets left and right Z translation */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: var(--width);
        aspect-ratio: 4/3;
        margin: auto;
        transform-style: preserve-3d;
        perspective: 3000px;
    }
    .artFront {
        position: absolute;
        height: 100%;
        width: 100%;
        background-size: cover;
    }
    .artFrontCanvas {       /* Alternative class used for canvas art*/
        transform: rotateX(7deg)
    }
    .artFrontFramed {       /* Alternative class used for framed art*/
        border: var(--width2) solid #A3A2A2;
        box-shadow: inset var(--width3) var(--width3) 1px #807F7F;
        background-size: cover;
        transform: rotateX(7deg)
    }
    .artTop {
        position: fixed;
        height: var(--width2);
        width: 100%;
        background: #BFBFBF;
        transform: rotateX(97deg) translateY(-45%) translateZ(var(--width4));
    }
    .artLeft {
        position: fixed;
        height: 100%;
        width: var(--width2);
        background: #BFBFBF;
        transform: rotateY(270deg) rotateZ(-7deg) translateX(-46%) translateZ(var(--width5));
    }
    .artRight {
        position: fixed;
        height: 100%;
        width: var(--width2);
        background: #BFBFBF;
        transform: rotateY(90deg) rotateZ(7deg) translateX(46%) translateZ(var(--width5));
    }
    .artBottom {
        position: fixed;
        height: var(--width2);
        width: 100%;
        background: #BFBFBF;
        transform: rotateX(277deg) translateY(45%) translateZ(var(--width4));
    }
    .artShadowBack {
        position: fixed;
        transform: translateZ(calc(var(--width) / 100 * -9));
        height: 100%;
        width: 100%;
        background-color: #D8D8D8;
    }
    .artShadowBase {
        position: fixed;
        transform: rotateX(90deg) translateY(calc(var(--width) / 100 * -4)) translateZ(calc(var(--width) / 100 * -38));
        height: 20%;
        width: 100%;
        background-color: #9D9D9D;
    }
    
/* ART MODES - (sizes and rotations) */
    .artCtrDisplay, .artCtrStill, .artCtrSimilar, .artCtrCart {
        width: 100%;
    }
    .artCtrCanvas {
        --width: 95vw;  
        transform: rotateX(356deg) rotateY(335deg) rotateZ(1deg);
    }
    .artCtrFramed {
        --width: 96vw;  
        left: -4px;
        transform: rotateX( 353deg) rotateY( 336deg) rotateZ( 2deg);
    }
    
@media only screen and (min-width: 480px) { /* LARGE PHONE TABLET PORTRAIT */
    .cardCtrDisplay {
        --width: 19rem;
    }
    .cardCtrSimilar {
        --width: 15rem;
    }
    .cardCtrCart {
        --width: 8rem;
    }
    .cardCtrStill, .cardCtrEnvelope, .cardCtrShelf {
        --width: 22.5rem;
    }
    .artCtrCanvas, .artCtrFramed {
        --width: 30rem;
    }
    .artCtrCart {
        width: 8rem;
    }
}

@media only screen and (min-width: 768px) { /* LARGE PHONE TABLET PORTRAIT */
    .cardCtrDisplay {
        --width: 19rem;
    }
    .cardCtrSimilar {
        --width: 15rem;
    }
    .cardCtrCart {
        --width: 8rem;
    }
    .cardCtrStill, .cardCtrEnvelope, .cardCtrShelf {
        --width: 26rem;
    }
    .artCtrCanvas, .artCtrFramed {
        --width: 35rem;
    }
    .artCtrCart {
        width: 8rem;
    }

}
    
@media only screen and (min-width: 1280px) { /* laptop desktop */
    .cardCtrDisplay {
        --width: 19.5rem;
    }
    .cardCtrSimilar {
        --width: 14rem;
    }
    .cardCtrCart {
        --width: 8rem;
    }
    .cardCtrStill, .cardCtrEnvelope, .cardCtrShelf {
        --width: 27rem;
    }
    .artCtrCanvas, .artCtrFramed {
        --width: 36rem;
    }
    .artCtrCart {
        width: 8rem;
    }
}

/* 3d book */

/* 3d broucher*/