.hurrdat-colophon {
    position: sticky;
    top: 0; 
    z-index: 19; 
    background-color: #f6f6f6 !important;
    padding: 30px !important;
    color: #000;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* Adds space between the columns */
}

.hurrdat-colophon > .tldr-summary,
.hurrdat-colophon > .hurrdat-toc {
    flex: 1 1 48%; /* Slightly less than half to fit the gap */
    padding: 10px;
    box-sizing: border-box; /* Includes padding in the width */
}

@media (max-width: 768px) {
    .hurrdat-colophon {
        flex-direction: column;
    }
    .hurrdat-colophon > .tldr-summary,
    .hurrdat-colophon > .hurrdat-toc {
        flex-basis: 100%;
    }
}

.hurrdat-toc ol {
    column-count: 2;           /* Specifies the number of columns */
    column-gap: 50px;          /* Specifies the gap between the columns */
    padding: 0 0 0 25px !important;
    list-style-position: outside !important;
}

.hurrdat-toc li {
    break-inside: avoid;       /* Avoids breaking list items across columns */
    page-break-inside: avoid;  /* For older browsers like IE */
    -webkit-column-break-inside: avoid;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .hurrdat-toc ol {
        /* Single column on mobile */
        column-count: 1;
    }
}