@media (max-width: 768px) {
    .column1, .column2, .column3, .column4,
    .column5, .column6, .column7, .column8,
    .column9, .column10, .column11, .column12 { width: 100%; text-align: center; }
    .justify-content-center {gap:1rem}
}

@media (max-width: 800px) {

    .alphabet { display: block; width: 100%; position: relative; overflow-x: scroll; }

    .alphabet .AlphabetNav { display: table; }
    .alphabet .AlphabetNav a { display: table-cell; padding: 18px; }
}

@media (min-width: 400px) {
    .AlphabetNav { top: 2vh; right: 0; /*height: 90vh;*/ width: 9em; }

    .AlphabetNav a { /*desired width - margins*/ width: calc(100% * 1/3 - .3em); }
}

@media (min-width: 400px) and (min-height: 600px) {
    .AlphabetNav { width: 6em; }

    .AlphabetNav a { width: calc(100% * 1/2 - .5em); margin: .25em; }
}

@media (min-width: 800px) {
     /*Change AlphabetNav to work horizontally*/
    .AlphabetNav { /*top: 0; display: flex; align-items: flex-start; flex-flow: nowrap row; justify-content: space-around;*/ width: 100%; height: auto; background: ghostwhite; }

    .AlphabetNav a { margin: .5em 0; padding: .5em 0; }

    .alphabet { display: block; width: 100%; position: relative; overflow-x: scroll; }

    .alphabet .AlphabetNav { display: table; }
    .alphabet .AlphabetNav a { display: table-cell; padding: 13px; }
}