rowcolumn.css

:root {
    --r: right;
    --l: left;
    --c: center;
    --fs: flex-start;
    --fe: flex-end;
    --colorM: rgba(240, 81, 62, 1.0);
    --colorL: rgba(240, 81, 62, 0.5)
}
.maincolor{
    color: var(--colorM);
}
.lightcolor{
    color: var(--colorL);
}
@media only screen and (orientation: portrait) {
    .p-tal {
        text-align: left;
    }
    .p-tar {
        text-align: right;
    }
    .p-tac {
        text-align: center;
    }
    .p-taj {
        text-align: justify;
    }
    .p-bl, .p-tl, .p-br, .p-tr, .p-bc, .p-tc, .p-lc, .p-rc, .p-cc {
        display: flex;
    }
    .p-bl {
        align-items: var(--fe);
        justify-content: var(--l);
    }
    .p-tl {
        align-items: var(--fs);
        justify-content: var(--l);
    }
    .p-br {
        align-items: var(--fe);
        justify-content: var(--r);
    }
    .p-tr {
        align-items: var(--fs);
        justify-content: var(--r);
    }
    .p-bc {
        align-items: var(--fe);
        justify-content: var(--c);
    }
    .p-tc {
        align-items: var(--fs);
        justify-content: var(--c);
    }
    .p-lc {
        align-items: var(--c);
        justify-content: var(--l);
    }
    .p-rc {
        align-items: var(--c);
        justify-content: var(--r);
    }
    .p-cc {
        align-items: var(--c);
        justify-content: var(--c);
    }
}
@media only screen and (orientation: landscape) {
    .l-tal {
        text-align: left;
    }
    .l-tar {
        text-align: right;
    }
    .l-taj {
        text-align: justify;
    }
    .l-tac {
        text-align: center;
    }
    .l-bl, .l-tl, .l-br, .l-tr, .l-bc, .l-tc, .l-lc, .l-rc, .l-cc {
        display: flex;
    }
    .l-bl {
        align-items: var(--fe);
        justify-content: var(--l);
    }
    .l-tl {
        align-items: var(--fs);
        justify-content: var(--l);
    }
    .l-br {
        align-items: var(--fe);
        justify-content: var(--r);
    }
    .l-tr {
        align-items: var(--fs);
        justify-content: var(--r);
    }
    .l-bc {
        align-items: var(--fe);
        justify-content: var(--c);
    }
    .l-tc {
        align-items: var(--fs);
        justify-content: var(--c);
    }
    .l-lc {
        align-items: var(--c);
        justify-content: var(--l);
    }
    .l-rc {
        align-items: var(--c);
        justify-content: var(--r);
    }
    .l-cc {
        align-items: var(--c);
        justify-content: var(--c);
    }
}