.flip-card-inner {
    position: relative;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
    position: absolute;
    backface-visibility: hidden;
}
.flip-card-back {
    transform: rotateY(180deg);
}
.flipTrue {
    transform: rotateY(180deg);
}
@media (max-width: 320px) {
    #grid-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));

    }
    .div-col2 {
        grid-column: span 2 / span 2 !important;
        justify-self : start !important;
    }
    .div-col4 {
        grid-column-start: 2 !important;
        grid-column-end: 4 !important;
    }
}

@media (max-width: 400px) {
    #flex-col {
        display: flex;
        flex-direction: column;
    }
}

.border-gray:after {
    border-color: #374151;
}
.border-red:after {
    border-color: #991b1b;
}