.glossary-group {
    border: 2px solid var(--primary-300);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5em;
}

.glossary-group h2.glossary-letter {
    margin: -1rem -1.5rem 1rem -1.5rem;
    padding: .5rem 1.5rem;
    background: var(--primary-300);
    color: #fff;
}

.glossary-group dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.glossary-group dl dt {
    width: 15em;
    padding-right: 1em;
}

.glossary-group dl dd {
    width: calc(100% - 15em);
    margin-bottom: 1.5rem;
}

.glossary-group dl dd:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .glossary-group dl {
        flex-direction: column;
    }

    .glossary-group dl dt,
    .glossary-group dl dd {
        padding-right: 0;
        width: 100%;
    }
}