@keyframes preview_in_out {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* containers */
.layout_preview_row,
.layout_preview_col,
.layout_preview_container_main {
    --preview_box_color     : rgb(65, 77, 65);
    --preview_border_radius : 10px;

    display         : flex;

    align-items     : center;
    justify-content : center;
    gap             : 10px;

}


/* principal */
.layout_preview_container_main {

    flex-direction  : row;

    position        : fixed;
    width           : 50vw;
    height          : 50vh;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);

    z-index         : 200;

    animation       : preview_in_out 1.0s ease-in 1;
    opacity         : 1;

    align-items     : center;
    justify-content : center;


}



@media (orientation: portrait) {
    .layout_preview_container_main {
      width : 80vw;
      height: 30vh;
    }
  }


/* linhas e colunas */
.layout_preview_row {
    flex-direction  : row;
    width           : inherit;
    height          : inherit;
}

.layout_preview_col {
    flex-direction  : column;
    width           : inherit;
    height          : inherit;
}


/* alinhamentos dos objetos */

.layout_align_start {
    align-self: flex-start;
}

.layout_align_end {
    align-self: flex-end;
}

.layout_align_center {
    align-self: center;
}


.layout_border_decorator {
    border          : 1px solid beige;
    border-radius   : var(--preview_border_radius);
}




/* _____________________________________________ */

/* boxes */
.layout_preview_box,
.layout_preview_box_row_1,
.layout_preview_box_cell_2x2,
.layout_preview_box_cell_3x3 {

    background-color: var(--preview_box_color);
    border-radius   : var(--preview_border_radius);

    width           : 30%;
    height          : 30%;
}


.layout_preview_box_cell_2x2 {
    width           : 30%;
    height          : 60%;
}

.layout_preview_box_row_1 {
    width           : 30%;
    height          : 60%;
}