Bootstrap - div z position absolute nie łapie się pod responsywność, da się to zmienić?

stworzyłem sobie trójwymiarową kostkę, w której będę wyświetlał zawartość mojej strony. Stronę mam w bootstrapie, ale ta kostka, żeby się trzymała musi być w divach z position absolute. Poniżej załączam kod:

<main>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="content">
                        <div class="scene">
                            <div class="cube">
                                <div class="cube-face  cube-face-front">
                                </div>
                                <div class="cube-face  cube-face-back">
                                                            </div>
                                <div class="cube-face  cube-face-left">
                                                            </div>
                                <div class="cube-face  cube-face-right" id="style-3">
                                </div>
                                <div class="cube-face  cube-face-top">
                                </div>
                                <div class="cube-face  cube-face-bottom">
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

.content{
    text-align: center;
    max-width: 100%;
    height: auto;
}

/* CUBE */

.scene {
    margin-top: 150px;
    margin-bottom: 150px;
    width: 400px;
    height: 400px;

    perspective: 600px;
}
.cube{
    width: inherit;
    height: inherit;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.cube-face{
    overflow: auto;
    width: inherit;
    height: inherit;
    position: absolute;
    background: black;
    opacity: 0.8;
}
.cube-face-front {
    background: radial-gradient(at left top, white 5%, black 60%);
    transform: translate3d(0, 0, 200px);
} 
.cube-face-back {
    background: radial-gradient(at left top, white 5%, black 60%);
    transform: rotateY(180deg) translate3d(0, 0, 200px);
} 
.cube-face-left {
    background: radial-gradient(at left top, white 5%, black 60%);
    transform: rotateY(-90deg) translate3d(0, 0, 200px);
} 
.cube-face-right {
    background: radial-gradient(at left top, white 5%, black 60%);
    transform: rotateY(90deg) translate3d(0, 0, 200px);
} 
.cube-face-top {
    background: radial-gradient(at left top, white 5%, black 60%);
    transform: rotateX(90deg) translate3d(0, 0, 200px);
} 
.cube-face-bottom {
    background: radial-gradient(at left top, white 5%, black 60%);
    transform: rotateX(-90deg) translate3d(0, 0, 200px);
}

i pytanie co zrobić, żeby ta kostka(cube) skalowała się jak ten div content, czyli działała jak bootsrap przykazał?
próbowałem też to obsłużyć przez javascript żeby wymiary tej kostki zmniejszyć w zależności od wielkości ekranu(przy ekranie komórki) czyli coś takiego ale to nie chce mi działać.

if(window.innerWidth == 285){
    $('.scene').css("width", "200").css("height", "200");
    $('.cube-face-front').css("transform", "translate3d(0, 0, 100px)");
    $('.cube-face-back').css("transform", "translate3d(0, 0, 100px)");
    $('.cube-face-left').css("transform", "translate3d(0, 0, 100px)");
    $('.cube-face-right').css("transform", "translate3d(0, 0, 100px)");
    $('.cube-face-top').css("transform", "translate3d(0, 0, 100px)");
    $('.cube-face-bottom').css("transform", "translate3d(0, 0, 100px)");
}

Choć może macie jakiś inny pomysł? Jestem otwarty na propozycje bo poszukuje tego rozwiązania.

Pozdrawiam :)

Zmianę rozmiaru tej kostki da się zrobić w CSS, ale problem w tym, że transformacje 3D są dobrane pod konkretny rozmiar i po przeskalowaniu .scene na więcej niż 400×400 px całość przestaje przypominać kostkę.

Nie wiem, co dokładnie chciałbyś uzyskać, ale sugeruję pobawić się raczej z SVG i w nim narysować sobie odpowiednie kształty, które będą się bez problemu skalować.

Dziękuję za odpowiedź, spróbuję coś z tym pokombinować.