:root {
    --book-w: min(50vw, 20em);
    --book-h: calc(var(--book-w)*1.5);
    }

    #tgg-mobile-book {
      display:block;
       width: 10em;
    margin: -1em auto 0;
    z-index:4;
    }

    #book-container {display:none;}

    @media(min-width:48em) {
      #book-container {display:block;}
    #tgg-mobile-book {display:none;}
    }

    #open-book {padding: .75rem 1rem; border: 0; border-radius: .75rem; font-weight: 600; cursor: pointer;}

    #book-flip {grid-template-columns: 1fr; place-items: center;}

    .book {
      position: absolute;right: 0;top:20vh; width:50%; height: auto;
      perspective: 2500px; isolation: isolate;aspect-ratio:0.67/1;
    }
    .sheets { position: absolute; inset: 0; transform-style: preserve-3d;}

.sheet {
      position: absolute; inset: 0; transform-style: preserve-3d;
      transform-origin: left 50%; will-change: transform;
    }
    
    .book-cover {
      position: absolute; inset: 0; overflow: hidden;
      pointer-events: none;
      z-index: 10000;
    }
    .book-cover img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .face {
      position: absolute; inset: 0; overflow: hidden;
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
    }
    .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .front { transform: rotateY(0deg);}
    .back  { transform: rotateY(180deg); }

    .tgg-flex-container {display:flex;flex-direction:column-reverse;}

    .tgg-flex-container > * {width:100%;}

    .tgg-background {background-color: rgba(0, 0, 0, 0.25);width:100%;margin:0}

    @media(min-width:48em){

    .tgg-flex-container {display:flex;flex-direction:row;width: 100%;
        margin: 0 auto;gap:1.618em;}

    .tgg-flex-container > * {width:50%;}
    }

    #tgg-chapra-mobile {width:15em;margin:-6em auto 0;position: relative;z-index: 3;}

    .tgg-text-animation--final {
      font-style: italic;
    }