.page {
    padding: 1rem;
    margin-top: var(--header-height, 4rem);
}

.page-hr {
    border: 0;
    border-top: 2.5px solid black;
    margin: 1rem 0;
}

.page-header {
    border-top: 2.5px solid black;
    padding: 1rem 0;
}

.page-header-info {
    border-top: 2.5px dashed black;
    border-bottom: 2.5px dashed black;
    padding: 1rem 0;
    margin-top: 1rem;
}

.page-aside {
    margin-bottom: 4rem;
    border-bottom: 2.5px solid black;
    padding-bottom: 1rem;
    
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    height: fit-content;
}

@media screen and (min-width: 640px) {
    .page {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
        padding: 2rem;
        margin-top: var(--header-height, 4rem);
    }
    
    .page-hr {
        grid-column: 2/-5;
    }

    .page-header {
        grid-column: 2/-5;
        margin-bottom: 1rem;
    }

    .page-aside {
        grid-column: -5/-2;
        margin-bottom: 2rem;
        border-top: 2.5px solid black;
        padding: 1rem 0;
    }
}

/* Desktop Large (> 1920px) */
@media screen and (min-width: 100rem) {
    .page-header {
        grid-column: 2/-6;
    }
    .page-aside {
        grid-column: -6/-2;
    }
}


/* 
Highlighted Post */

.highlight {
    position: relative;
    margin-bottom: 4rem;
}

.highlight-content {
    border-bottom: 2.5px solid black;
    padding: 1rem 0;
}

.highlight-content-header-title {
    margin: 0.5rem 0;
}

@media screen and (min-width: 640px) {
    .highlight {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
        align-items: center;
        margin-bottom: 2rem;
    }

    .highlight-cover {
        grid-column: 1/9;
        height: 100%;
        width: 100%;
    }

    .highlight-cover figure,
    .highlight-cover picture,
    .highlight-cover img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .highlight-content {
        grid-column: 9/13;
        border-top: 2.5px solid black;
        border-bottom: 2.5px solid black;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* 
Filters */

.page-filters {
    scroll-margin: var(--header-height, 5rem);
    margin-bottom: 4rem;
    border-bottom: 2.5px solid black;
}

.page-filters-title {
    border-top: 2.5px solid black;
    border-bottom: 2.5px solid black;
    padding: 0.5rem 0;
}

.page-filters-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 1rem 0;
}

/* Tablet (>=640px) */
@media screen and (min-width: 640px) {
    .page-filters {
        grid-row: 2/4;
        grid-column: -3/-1;
        border-top: 0;
        position: sticky;
        top: 5rem;
        align-self: flex-start;
    }
}


/* Tag */
.tag {
    display: block;
    border: 2.5px solid black;
    padding: 0.125rem 0.5rem;
    position: relative;
}

.tag.active,
.tag:hover {
    background-color: black;
    color: white;
}


/* 
    Tables 
*/
.table {
    margin-bottom: 4rem;
    border-bottom: 2.5px solid black;
}

.table-title {
    border-top: 2.5px solid black;
    border-bottom: 2.5px solid black;
    padding: 0.5rem 0;
}

.table-title.black {
    background-color: black;
    border-bottom: 0;
    color: white;
    padding: 0.5rem;
}

.table-header {
    border-bottom: 2.5px solid black;
    padding: 0.75rem 0;
    display: none;
}


.table-row {
    padding: 0.5rem 0;
    transition: 300ms;
    position: relative;
}

.table-row:hover {
    background-color: rgb(0, 255, 0);
}

.table-row:not(:last-child) {
    border-bottom: 2.5px dashed black;
}

.table-row-title {
    margin-bottom: 4px;
}

.table-row-image {
    display: none;
}

@media screen and (min-width: 640px) {
    .table {
        grid-column: 1/-3;
        margin-bottom: 6rem;
    }

    .table-header,
    .table-row {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 1rem;
        padding: 1.125rem 0;
    }

    .table-header-date,
    .table-row-date {
        grid-column: 1/3;
        margin-left: 1rem;
    }

    .table-header-title,
    .table-row-title {
        grid-column: 3/7;
    }

    .table-header-location,
    .table-row-location {
        grid-column: 7/9;
    }

    .table-header-categories,
    .table-row-categories {
        grid-column: 9/11;
    }

    .table-row-title {
        margin-bottom: 0;
    }

    .table-row-image {
        display: block;
        position: fixed;
        top: var(--y, 50%);
        left: var(--x, 50%);
        width: 25vw;
        height: auto;
        translate: -50% -50%;
        opacity: 0;
        transition: opacity 3s;
        pointer-events: none;
        z-index: -1;
    }

    .table-row-image.visible {
        transition: opacity 250ms;
        opacity: 1;
    }
}