Problemas tratando de hacer elementos que sean responsivos y que roten (flip)

[alvarols]

Estoy hacieno un layout para un portafolio de proyectos donde al pasar el mouse por cada item, este gire (que es algo que está como de moda).

El problema es que quiero que el tamaño de estos elementos se ajusten al tamaño de la pantalla y que sean responsivos y parece que hay un conflicto porque tengo que poner ancho y alto definidos, si no no se ven los elementos completos.

Este es el HTML "está en Wordpress por lo tanto es un loop en PHP"

Código PHP:

<?php query_posts( 'posts_per_page=12' );?>
            <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
                
                    <div class="col2 span_1_of_3">
                    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                        <div class="flipper">
                            <div class="front">
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('portfolio'); ?></a>
                            </div>
                            <div class="back">
                                <div class="backtabla">
                                    <?php the_title(); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div> 
                
            <?php endwhile; ?>
            <?php endif; ?>
 

Este es el CSS

Código CSS:

.span_1_of_3 {
    width: 32.2%;
        padding:7.2px;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; 
        margin:0px 12px 3px 0px;
}
 
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
 
}
.flip-container:hover{
    z-index:1000000;
}
    .flip-container:hover .flipper,  
  .flip-container.hover .flipper {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
 
 
// ESTA ES LA PARTE DONDE DECLARO EN ABSOLUTOS, SI DECLARO EN PORCENTAJE O CON max-width y/o max-height SOLO SE VEN UNAS FRANJAS HORIZONTALES
 
.flip-container, .front, .back {
    width: 395px;
    height: 263px;
 
}
 
.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
 
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
  
  -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
 
    transition: 0.6s;
    transform-style: preserve-3d;
 
    position: relative;
}
 
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
    backface-visibility: hidden;
 
    position: absolute;
    top: 0;
    left: 0;
}
 
.front {
    z-index: 2;
}
 
.back {
    display:table;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
 
    background: #282828;
    color:#fff;
    text-align:center;
    z-index:1000 !important;
}
 
.backtabla{
    display: table-cell;
    vertical-align: middle;
}
 
.front .name {
    font-size: 2em;
    display: inline-block;
    background: rgba(33, 33, 33, 0.9);
    color: #f8f8f8;
    font-family: Courier;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: 60px;
    left: 25%;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.05em #333;
 
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
 
 
 
.back p {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}
 
.section2 .span_1_of_3 {
    -webkit-transform: scale(1,1);
 
 
}
 
.section2 .span_1_of_3:hover {
    
}
@media only screen and (max-width: 1100px) {
    .span_1_of_3{
        width:48.2%;
    }
 
}
@media only screen and (max-width: 715px) {
 
    .section2 {
    clear: both;
    padding:15px 3% 0px 3%;
}
    .span_1_of_3{
        margin:0 auto;
        width:100%;
    }
    .flip-container, .front, .back {
    width: 300px;
    height: 200px;
}
}
@media only screen and (max-width: 400px) {
        .span_3_of_3 {
        width: 100%; 
        
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
        margin:0px 0px 0px 0px;
    }
    .section2{
        
    }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 
@media only screen and (max-width: 900px) {
    .span_2_of_2 {
        width: 100%; 
    }
    .span_1_of_2 {
        width: 100%; 
    }
    .section{
        width:auto;
    }
    #blog{
        margin:0px;
        padding:0px;
    }
}