Flip boxes layout

:root {
    --box-overlay-color-hover: rgba(185, 39, 113, .5);
    --video-bg-overlay-color: rgba(94, 36, 157, .31);
}
@media(min-width: 1921px){
    :root {
        --padding-top: 4%;
        --padding-right: 10%;
        --padding-left: 10%;
        --front-padding-bottom: 60%;
        --back-padding-bottom: 10%;
        --body-font-size: 1vw;
        --columns: 4;
    }
}
@media(min-width: 926px) and (max-width: 1920px){
    :root {
        --padding-top: 4%;
        --padding-right: 10%;
        --padding-left: 10%;
        --front-padding-bottom: 60%;
        --back-padding-bottom: 10%;
        --body-font-size: 1vw;
        --columns: 3;
    }
}

@media (max-width: 925px) and (min-width: 623px) {
    :root {
        --padding-top: 4%;
        --padding-right: 10%;
        --padding-left: 10%;
        --front-padding-bottom: 60%;
        --back-padding-bottom: 10%;
        --body-font-size: 1.8vw;
        --columns: 2;
    }
}

@media (max-width: 622px) and (min-width: 481px) {
    :root {
        --padding-top: 8%;
        --padding-right: 10%;
        --padding-left: 10%;
        --front-padding-bottom: 55%;
        --back-padding-bottom: 10%;
        --body-font-size: 2.8vw;
        --columns: 2;
    }
}

@media (max-width: 480px) {
    :root {
        --padding-top: 8%;
        --padding-right: 10%;
        --padding-left: 10%;
        --front-padding-bottom: 75%;
        --back-padding-bottom: 10%;
        --body-font-size: 3.8vw;
        --columns: 1;
    }
}

.dt-wrapper .et_pb_column .et_pb_blurb {
    padding: var(--padding-top) var(--padding-right) var(--front-padding-bottom) var(--padding-left);
    font-size: var(--body-font-size);
}

.dt-wrapper .et_pb_column .et_pb_blurb:last-child {
    padding: var(--padding-top) var(--padding-right) var(--back-padding-bottom) var(--padding-left);
}

.dt-wrapper .et_pb_column .et_pb_blurb {
    padding: var(--padding-top) var(--padding-right) var(--front-padding-bottom) var(--padding-left);
}

.dt-wrapper .et_pb_column .et_pb_blurb:last-child {
    padding: var(--padding-top) var(--padding-right) var(--back-padding-bottom) var(--padding-left);
}

.dt-wrapper {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(var(--columns), 1fr);
}


.dt-wrapper .et_pb_row .et_pb_column {
    position: relative;
    -webkit-transition: transform .8s;
    transition: transform .8s;
    -webkit-transform-style: preserve-3d;
    transform-style: perspective(2px)
}

.dt-wrapper .dt-active .et_pb_column {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.dt-wrapper .et_pb_row .et_pb_blurb {
    -webkit-transform: translate3d(0px, 0px, 0px);
    backface-visibility: hidden;
    position: relative;
}

.dt-wrapper .et_pb_row .et_pb_blurb .et_pb_blurb_content {
    z-index: 11;
}

.dt-wrapper .et_pb_row .et_pb_blurb:last-child {
    -webkit-transform: rotateY(180deg), flat;
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
}

.dt-wrapper .et_pb_row .et_pb_blurb:first-child::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    cursor: pointer;
}

.dt-wrapper .et_pb_row .et_pb_blurb.et_pb_section_video::after {
    background-color: var(--video-bg-overlay-color);
}

.dt-wrapper .et_pb_row .et_pb_blurb:hover::after,
.dt-wrapper .et_pb_row .et_pb_blurb.et_pb_section_video:hover::after {
    background-color: var(--box-overlay-color-hover);
}