.theory-pane-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.theory-pic-placement {
    /* display: grid;
    grid-template-columns: 1fr 2fr; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* border: solid;
    border-width: 0.01px; */
}

.theory-pic-placement p {
    text-align: center;
}

.theory-pane-title {
    width: 70%;
    padding: 10px;
    margin: 20px;
    text-align: center;
    color: white;    
    align-self: center;
    border-width: 1px;    
    background-image: linear-gradient(to right, darkblue, blue, darkblue);
    border-radius: 10px;    
}

.theory-pane-title h4 {
    margin: 0;
}

.theory-pic-people {
    width: 70%;
    padding: 5px;
    border-radius: 30%;
}

.theory-people-pics {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 10px;
    flex-basis: 100%;
}

/* table customization */

.table-theory th, .table-theory td {
    padding: 0.25rem;
    width: 1fr;    
}

.table-theory th>a, .table-theory td>a {
    word-break: break-all;
}

.table.table-striped.table-theory {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    margin-bottom: 0rem;
}

@media (max-width:820px) {
    .theory-people-pics {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: flex-start;
        column-gap: 10px;
        row-gap: 10px;
        flex-basis: 100%;
    }
}

@media (max-width:576px) {
    .theory-people-pics {
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
        column-gap: 10px;
        row-gap: 10px;
        flex-basis: 100%;
    }
}