.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30rem;
}

@media (min-width:591px) {
    .gallery__item {
        grid-column: var(--col, revert);
        grid-row: var(--row, revert);
    }
}

@media (max-width:590px) {
    .gallery {
        gap: 20rem;
        grid-template-columns: 1fr;
    }
}

.gallery-card {
    --hover: var(--FALSE);
    --def: var(--TRUE);
    --border-radius: 30rem;
    --padding: 30rem;
    --icon-size: 60rem;
    --card-height: 411rem;
    display: grid;
    grid-template-rows: var(--card-height) 0fr;
    position: relative;
    height: var(--card-height);
    overflow: hidden;
    overflow: clip;
    cursor: pointer;
}

.gallery-card--no-link {
    cursor: default;
}

@media (hover:hover) {
    .gallery-card:has(:hover, :focus-visible) {
        --hover: var(--TRUE);
        --def: var(--FALSE);
    }
}

@media (hover:none) {
    .gallery-card {
        --hover: var(--TRUE);
        --def: var(--FALSE);
    }
}

@media (max-width: 590px) {
    .gallery-card {
        --hover: 0.9;
        --def: var(--FALSE);
        --border-radius: 20rem;
        --padding: 10rem;
        --icon-size: 40rem;
        --card-height: 208rem;
        min-height: 208rem;
        grid-template-rows: 1fr;
        width: 100%;
    }

    .gallery-card:not(.gallery-card--large) {
        --ar: 290/208;
        height: revert;
    }

    .gallery-card--large {
        --ar: 290/380;
        height: revert;
    }
}

@media (min-width:591px) {
    .gallery-card--mark::before {
        inset-inline-end: 23rem;
        inset-block-start: 20rem;
    }
}

.gallery-card--mark::before {
    content: '';
    position: absolute;
    width: var(--icon-size);
    aspect-ratio: 1/1;
    background-color: #000;
    z-index: 2;
    border-radius: 50%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 60 60'%3E%3Cpath fill='%231C1C1C' d='m9 9 5.8864-1.61914 3.7485-4.81868 6.0579.75672L30 .30151l5.3072 3.01739 6.0579-.75672 3.7485 4.81868L51 9l1.6191 5.8864 4.8187 3.7485-.7567 6.0579L59.6985 30l-3.0174 5.3072.7567 6.0579-4.8187 3.7485L51 51l-5.8864 1.6191-3.7485 4.8187-6.0579-.7567L30 59.6985l-5.3072-3.0174-6.0579.7567-3.7485-4.8187L9 51l-1.61914-5.8864-4.81868-3.7485.75672-6.0579L.30151 30l3.01739-5.3072-.75672-6.0579 4.81868-3.7485L9 9Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M27.1764 2.23102h-3.5301c.0128-.391.02-.7843.02-1.1795 0-.44514-.361-.80592-.8059-.80592H5.59563c-.44494 0-.80592.36078-.80592.80592 0 .3952.00713.7885.01994 1.1795h-3.5301c-.44514 0-.80592.36078-.80592.80592 0 3.61111.94381 7.01796 2.65744 9.59336 1.6939 2.546 3.95026 4.0063 6.38775 4.1484.55258.6013 1.13668 1.0916 1.74508 1.4656v3.5819H9.91191c-1.6345 0-2.96406 1.3298-2.96406 2.9641v1.352h-.05729c-.44515 0-.80592.361-.80592.8059 0 .4451.36077.8059.80592.8059H21.5654c.4452 0 .8059-.3608.8059-.8059 0-.4449-.3607-.8059-.8059-.8059h-.0573v-1.352c0-1.6343-1.3295-2.9641-2.964-2.9641h-1.352v-3.5819c.6084-.3738 1.1927-.8643 1.7453-1.4656 2.4372-.1421 4.6936-1.6024 6.3877-4.1484 1.7137-2.5754 2.6572-5.98225 2.6572-9.59336 0-.44514-.3607-.80592-.8059-.80592ZM4.47301 11.7375C3.0595 9.61337 2.22903 6.83505 2.10247 3.84286h2.79721c.29068 3.67827 1.15411 7.07824 2.5036 9.77704.21491.4298.43969.8359.67286 1.2183-1.34047-.5062-2.58104-1.5644-3.60313-3.1007ZM19.8963 24.7903v1.3522H8.55969v-1.3522c0-.7455.60654-1.3523 1.35222-1.3523h8.63219c.7457 0 1.3522.6068 1.3522 1.3523Zm-4.3161-2.9641h-2.7044v-2.8816c.443.1167.8945.1774 1.3522.1774.4577 0 .9092-.0607 1.3522-.1774v2.8816Zm.4991-4.799c-.0363.0149-.0712.033-.1045.0529-.5696.2833-1.155.43-1.7468.43-.5916 0-1.1768-.1467-1.7462-.4296-.0338-.0203-.0688-.0384-.1055-.0537-.632-.3341-1.2433-.8387-1.8215-1.5017a.81841.81841 0 0 0-.1027-.12c-.57397-.6815-1.11398-1.5197-1.60719-2.5061C7.36382 9.937 6.50837 6.04235 6.41099 1.85744H22.045c-.0976 4.18491-.9531 8.07977-2.4339 11.04156-.4932.9864-1.0332 1.8246-1.607 2.5061a.79323.79323 0 0 0-.1031.1202c-.5782.6632-1.1898 1.1676-1.8217 1.5019Zm7.9037-5.2897c-1.0221 1.5363-2.2627 2.5945-3.6032 3.1007.2332-.3824.458-.7885.6729-1.2183 1.3495-2.6988 2.2127-6.09877 2.5036-9.77704h2.7972c-.1265 2.99219-.957 5.77051-2.3705 7.89464Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 47%;
    background-position: center;
}

.gallery-card--mark-inverted::before {
    filter: invert(1);
}

@media (max-width:590px) {
    .gallery-card--mark::before {
        inset-inline-end: var(--padding);
        inset-block-end: var(--padding);
    }
}

@media (min-width:591px) {
    .gallery-card__figure {
        height: var(--def, var(--img-height, 100%)) var(--hover, var(--img-hover-height, calc(100% - var(--line-height, 61rem))));
    }
}

.gallery-card__figure {
    margin: 0;
    grid-column: 1;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    overflow: clip;
    border-radius: var(--border-radius);
    grid-column: 1;
    grid-row: 1;
    transition: height .3s ease;
    position: relative;
    background-color: #d8d8d8;
}

.gallery-card__figure::after {
    content: '';
    position: absolute;
    inset-block-end: var(--padding);
    inset-inline-start: var(--padding);
    width: var(--icon-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 21'%3E%3Cpath fill='%23000' d='M16.3587 2.23918H5.83333V0H20v14.676h-2.3256V4.17259L1.71741 21 0 19.4902 16.3587 2.23918Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity .3s ease;
    opacity: var(--def, 0) var(--hover, 1);
    background-size: 34%;
}

.gallery-card__figure--no-link::after {
    display: none;
}

@media (hover:hover) and (min-width:1024px) {
    .gallery-card__img {
        scale: var(--def, revert) var(--hover, 1.12);
    }
}

.gallery-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius);
    transition: scale .3s ease, filter .3s ease;
    filter: brightness(var(--def, revert) var(--hover, .6));
    transform-origin: center;
    object-position: center;
}

@media (max-width:590px) {
    .gallery-card__img {
        aspect-ratio: var(--ar, revert);
    }
}

.gallery-card__link {
    font-weight: 629;
    font-stretch: 151%;
    font-size: 22rem;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    opacity: var(--def, 0) var(--hover, 1);
    transition: opacity .3s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (min-width:591px) {
    .gallery-card__link::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: all;
        z-index: 1;
    }
}

@media (max-width:590px) {
    .gallery-card__link {
        font-size: 0;
        position: absolute;
        inset: 0;
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        z-index: 1;
    }
}

.gallery-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rem;
    position: absolute;
    padding: var(--padding);
    width: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 2;
}

.gallery-card__tag {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-block: 6rem;
    padding-inline: 11rem;
    border-radius: 50rem;
    border: 1px solid #fff;
    font-size: 12rem;
    line-height: 1.2;
    transition-property: border-color, color, background-color, opacity;
    transition-timing-function: ease;
    transition-duration: .3s;
    opacity: var(--def, 0) var(--hover, 1);
}

@media (min-width: 591px) {
    .gallery-card__tag {
        background-color: #fff;
        color: #000;
    }
}

@media (hover:hover) and (max-width: 590px) {
    .gallery-card__tag:is(:hover, :focus-visible) {
        background-color: #fff;
        color: #000;
    }
}