#choose_league_logos {
    margin: 0 auto;
    display: grid;
    grid-auto-flow: row;              /* default, can omit */
    grid-template-columns: repeat(auto-fit, minmax(22vw, auto));
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

#choose_league_logos img {
  box-sizing: border-box;
  border: 2px solid black;
  padding: 3px;
}

.choose_league_main_text {
    text-align: center;
}

@media only screen and (max-width: 349px) {
    #choose_league_container {
        margin-top: calc(var(--topbar_height_and_pad)*var(--topbars_size_fraction_for_under_350px_wide_screens) + 30px);
    }
    .choose_league_logo {
        height: 22vw;
        width: 22vw;
    }
}
@media only screen and (min-width: 350px) and (max-width: 575px) {
    #choose_league_container {
        margin-top: calc(var(--topbar_height_and_pad)*var(--topbars_size_fraction_for_350px_through_576px_wide_screens) + 30px);
    }
    .choose_league_logo {
        height: 22vw;
        width: 22vw;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    #choose_league_container {
        margin-top: calc(var(--topbar_height_and_pad)*var(--topbars_size_fraction_for_576px_through_767px_wide_screens) + 30px);
    }
    .choose_league_logo {
        height: 22vw;
        width: 22vw;
    }
}
@media only screen and (min-width: 768px) {
    #choose_league_container {
        margin-top: calc(var(--topbar_height_and_pad) + 30px);
    }
    .choose_league_logo {
        height: 22vw;
        width: 22vw;
    }
}