/* Custom style for the selected projects page */
#regesto .filters {
    margin-top : 1rem;
}
.selected-projects {
    padding               : 0 var(--padding-side);
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 6rem;
    @media (width > 800px) {
        grid-template-columns : 1fr 1fr;
        gap                   : var(--gap);
    }
}
/* The Single Project Thumb */
.selected-project {
    position              : relative;
    grid-column           : 1 / -1;
    display               : grid;
    grid-template-columns : subgrid;
    grid-template-areas   : "content .";
    pointer-events        : none;
}
.selected-project-wrapper {
    grid-area      : content;
    pointer-events : all;
}
.selected-project.hidden {
    display : none;
}
.selected-project-link {
    position : absolute;
    inset    : 0;
}
@media (width > 800px) {    
    .selected-project:nth-child(even) {
        grid-template-areas: ". content";
    }
    .selected-project:not(:first-child):not(.first-selected) {
        margin-top : max(-7rem,-10%);
    }
}
.selected-project-info {
    display               : grid;
    grid-template-columns : repeat(6,1fr);
    gap                   : var(--gap);
    font                  : var(--font-bold);
    padding-top           : var(--gap);
    position              : relative;
}
.selected-project-title {
    grid-column : span 3;
}
.selected-project-size {
    grid-column : span 2;
}
.selected-project-year {
    grid-column : span 1;
}
.selected-project-thumb-container {
    display               : grid;
    grid-template-columns : repeat(6,1fr);
    gap                   : var(--gap);
    position              : relative;
}
.selected-project-thumb-container[data-images="1"] img.portrait { grid-column : span 3; }
.selected-project-thumb-container[data-images="1"] img.landscape { grid-column : span 6; }
.selected-project-thumb-container[data-images="1"] img.square { grid-column : span 4; }
.selected-project-thumb-container[data-images="2"] img.portrait { grid-column : span 3; }
.selected-project-thumb-container[data-images="2"] img.landscape { grid-column : span 3; }
.selected-project-thumb-container[data-images="2"] img.square { grid-column : span 3; }
.selected-project-thumb-container[data-images="2"] {
    align-items: stretch;
}
.selected-project-thumb-container[data-images="2"] img {
    object-fit: cover;
    object-position: center;
}
/* If there are no images we can put up a placeholder */
.selected-project-thumb-container[data-images="0"] {
    aspect-ratio: 3/2;
    border : 1px solid black;
    position : relative;
    background: var(--accent);
    &::before {
        content    : "";
        position   : absolute;
        inset      : 50% 0 auto 0;
        height     : 1px;
        background : black;
    }
    &::after {
        content    : "";
        position   : absolute;
        inset      : 0 50% 0 50%;
        width     : 1px;
        background : black;
    }
}