.horizontal_grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

.horizontal_grid_container_auto {
    display: grid;
    grid-template-columns: auto auto;
    justify-items: center;
}
.vertical_grid_container {
    display: grid;
    justify-items: center;
}
.vertical_flex_container {
    display: flex;
    flex-direction: column;;
}

.small_gap {
    grid-gap: 5px;
}

.med_gap {
    grid-gap: 10px;
}

.large_gap {
    grid-gap: 30px;
}

.grid {
    display: grid;
}

.grid_container_2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* grid-template-rows: max-content; */
    align-content: baseline;
    justify-items: left;
    align-items: center;
}

/**
    Setting display:contents means don't draw a box - use the parent
    (the effect: I want a container just for showing / hiding without
    affecting layout)
 **/
.container_contents {
    display: contents;
}

.grid_container_2_auto {
    display: grid;
    grid-template-columns: min-content auto;
    align-content: baseline;
    justify-items: left;
    align-items: center;
}

.grid_container_3 {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: max-content;
    align-content: center;
    justify-items: left;
    padding-top: 15px;
}

.grid_container_4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: max-content;
    align-content: center;
    justify-items: left;
    padding-top: 15px;
    row-gap: 5px;
}

.grid_container_5_auto {
    display: grid;
    grid-template-columns: 1fr 1.5fr 3fr 1fr 1fr;
    grid-template-rows: max-content;
    align-content: center;
    justify-items: left;
}

.grid_container_5 {
    display: grid;
    grid-template-columns: auto 1.5fr auto 1fr 1fr;
    grid-template-rows: max-content;
    align-content: baseline;
    justify-items: left;
    padding-top: 15px;
}

.grid_container_5_v2 {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr 1fr;
    grid-template-rows: max-content;
    align-content: center;
    justify-items: left;
    padding-top: 15px;
}

.grid_full_width {
    grid-column: 2 / 6;
    width: 95%;
}

.grid_indented {
    padding-left: 10px;
}

.grid_center {
    place-self: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.grid_vcenter {
    align-items: center;
}

.grid_col_1 {
    grid-column: 1 / 2;
}

/* .grid_col_1 {
    grid-column: 1;
} */

.grid_col_2 {
    grid-column: 2 / 3;
}

/* .grid_col_2 {
    grid-column: 2;
} */

.grid_col_3 {
    grid-column: 3;
}

.grid_col_4 {
    grid-column: 4;
}

.grid_col_5 {
    grid-column: 5;
}

.grid_col_1_2 {
    grid-column: 1 / 3;
}

.grid_col_1_3 {
    grid-column: 1 / 3;
}

.grid_col_2_5 {
    grid-column: 2 / 5;
}

.grid_col_3_5 {
    grid-column: 3 / 5;
}

.grid_3_6 {
    grid-column: 3 / 6;
}

.grid_col_1_6 {
    grid-column: 1 / 6;
}