.a2lix_translations {
    details {
        summary {
            border-bottom: 2px solid transparent;
            cursor: pointer;
            list-style: none;
            padding: .5rem;
            white-space: nowrap;

            &:hover {
                border-bottom-color: lightskyblue;
            }
        }

        ::details-content {
            padding: .5rem;
        }

        &:open > summary {
            border-bottom-color: dodgerblue;
            font-weight: 700;
        }

        &:not(:open)::details-content {
            display: none;
        }
    }
}

@media screen and (width >= 1024px) {
    .a2lix_translations {
        column-gap: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

        details {
            display: contents;

            summary {
                grid-row: 1;
            }

            &::details-content {
                grid-row: 2;
                grid-column: 1 / -1;
                padding: 1rem;
            }
        }
    }
}

