.turmason-grid {
    --turmason-gap: var(--turgal-gap, clamp(12px, 2vw, 22px));
    position: relative;
    display: block;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    gap: var(--turmason-gap);
    column-count: initial;
    column-gap: initial;
}

.turmason-card {
    position: absolute;
    display: block;
    margin: 0;
    break-inside: auto;
    page-break-inside: auto;
    transition:
        left .32s ease,
        top .32s ease,
        opacity .78s cubic-bezier(0.16, 1, 0.3, 1),
        transform .78s cubic-bezier(0.16, 1, 0.3, 1);
}

.turmason-grid.turmason-reveal-enabled .turmason-card:not(.turgal-card-entering):not(.turgal-card-exiting) {
    opacity: 0;
    transform: translateY(44px);
    transition:
        left .32s ease,
        top .32s ease,
        opacity .78s cubic-bezier(0.16, 1, 0.3, 1),
        transform .78s cubic-bezier(0.16, 1, 0.3, 1);
}

.turmason-grid.turmason-reveal-enabled .turmason-card.turmason-card-visible:not(.turgal-card-entering):not(.turgal-card-exiting) {
    opacity: 1;
    transform: translateY(0);
}

.turmason-card .turgal-card-button {
    width: 100%;
    height: 100%;
}

.turmason-card .turgal-card-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.turmason-card[data-turmason-shape="square"] .turgal-card-button,
.turmason-card[data-turmason-shape="portrait"] .turgal-card-button,
.turmason-card[data-turmason-shape="landscape"] .turgal-card-button {
    min-height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .turmason-card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 760px) {
    .turmason-grid {
        max-width: 100%;
    }
}