body > main {
    padding-top: 0;
}

.gridzy a {
}


.gridzy a figure {
    /* background-color: var(--project-color); */
    /* overflow: hidden; */
    position: relative;
}

/* .gridzy:not(.info-active) a:hover figure img,
.gridzy.info-active a:not(:hover) figure img {
    filter: grayscale(100%) brightness(.6);
    mix-blend-mode: screen;
} */

.gridzy {
}



.gridzy .flag {
    position: absolute;
    top: var(--bar-height);
    right: -0.3125rem;
    z-index: 1;
    transition: opacity var(--transition-duration);
}

.gridzy:not(.info-active) a:hover .flag:not(.event),
.gridzy.info-active a:not(:hover) .flag:not(.event) {
    opacity: 0;
}

.gridzy a .flag.event {
    transition: color var(--transition-duration), background-color var(--transition-duration);
}

.gridzy:not(.info-active) a:hover .flag.event,
.gridzy.info-active a:not(:hover) .flag.event {
    color: var(--project-color);
    background-color: color-mix(in srgb, var(--project-color), #fff 90%);
}


.gridzy figcaption {
    position: absolute;
    inset: 0;
    padding: var(--bar-height);
    display: flex;
    align-items: flex-end;
    color: #fff;
    opacity: 0;
    transition: opacity var(--transition-duration);
    font-weight: var(--font-weight-bold);
}

.gridzy:not(.info-active) a:hover figcaption,
.gridzy.info-active a:not(:hover) figcaption {
    opacity: 1;
}


.gridzy a img {
    transition: filter var(--transition-duration);
}

.gridzy:not(.info-active) a:hover figure img,
.gridzy.info-active a:not(:hover) figure img {
    filter: grayscale(100%) brightness(.3);
}

.gridzy a figure::after {
    content: " ";
    position: absolute;
    /* z-index: 1; */
    inset: 0;
    background-color: var(--project-color);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity var(--transition-duration);
}

.gridzy:not(.info-active) a:hover figure::after,
.gridzy.info-active a:not(:hover) figure::after {
    opacity: 1;
}








.randomtexts {
    display: flex;
    justify-content: flex-end;
    gap: .25em;
    text-align: right;
    margin-bottom: var(--gridzy-spaceBetween);
    white-space: nowrap;
}

.randomtexts.font-multi-line-bold {
    font-size: var(--font-size-large);
}

.randomtexts-small-outer {
    display: inline-block;
    position: relative;
    bottom: calc((var(--font--multi-line-bold--line-height) * 1em) + var(--font--multi-line-bold--offset-top) + var(--font--multi-line-bold--offset-bottom));
}

.randomtexts-small {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    position: relative;
    top: calc((var(--font--multi-line--line-height) * 1em) + var(--font--multi-line--offset-top) + var(--font--multi-line--offset-bottom));
}

.randomtexts-small span {
    display: block;
    padding-right: .25em;
}

.randomtexts-large {
    font-weight: var(--font-weight-bold);
    display: inline-block;
    white-space: normal;
}