/* Flip tiles: a 2x2 block of tiles that flip over one after another, changing colour on the reverse. Mobile optimised. */
.loader_box .loader78 {
    display: grid;
    grid-template-columns: repeat(2, 46px);
    gap: 8px;
    width: 100px;
    height: 100px;
    perspective: 420px;
}

.loader_box .loader78-tile {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    transform-style: preserve-3d;
    animation: loader78-flip 2.6s ease-in-out infinite;
}

.loader_box .loader78-tile::before,
.loader_box .loader78-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px 0px 12px 0px;
    backface-visibility: hidden;
}

.loader_box .loader78-tile::after {
    transform: rotateY(180deg);
}

.loader_box .loader78-tile:nth-child(1) { animation-delay: 0s; }
.loader_box .loader78-tile:nth-child(2) { animation-delay: 0.22s; }
.loader_box .loader78-tile:nth-child(4) { animation-delay: 0.44s; }
.loader_box .loader78-tile:nth-child(3) { animation-delay: 0.66s; }

.loader_box .loader78-tile:nth-child(1)::before { background: #036C91; }
.loader_box .loader78-tile:nth-child(1)::after  { background: #49ABCB; }
.loader_box .loader78-tile:nth-child(2)::before { background: #3C3D71; }
.loader_box .loader78-tile:nth-child(2)::after  { background: #4452A4; }
.loader_box .loader78-tile:nth-child(3)::before { background: #41AD49; }
.loader_box .loader78-tile:nth-child(3)::after  { background: #A5CE3A; }
.loader_box .loader78-tile:nth-child(4)::before { background: #49ABCB; }
.loader_box .loader78-tile:nth-child(4)::after  { background: #036C91; }

@keyframes loader78-flip {
    0%, 15% { transform: rotateY(0deg); }
    45%, 65% { transform: rotateY(180deg); }
    95%, 100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader78-tile {
        animation: none;
    }
}