.dawask-grid {
    display: grid;
    grid-template-columns: repeat(var(--desktop-cols), 1fr);
    gap: var(--gap);
}

@media (max-width: 1024px) {
    .dawask-grid {
        grid-template-columns: repeat(var(--tablet-cols), 1fr);
    }
}

@media (max-width: 768px) {
    .dawask-grid {
        grid-template-columns: repeat(var(--mobile-cols), 1fr);
    }
}

.dawask-item {
    position: relative;
    overflow: hidden;
}

.dawask-item a {
    display: block;
}

.dawask-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: all .35s ease;
}

.dawask-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.45);

    opacity: 0;

    transition: all .35s ease;
}

.dawask-overlay h3 {
    color: white;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dawask-item:hover img {
    transform: scale(1.05);
    filter: brightness(.6);
}

.dawask-item:hover .dawask-overlay {
    opacity: 1;
}

.ratio-1-1 .dawask-item {
    aspect-ratio: 1 / 1;
}

.ratio-4-3 .dawask-item {
    aspect-ratio: 4 / 3;
}

.ratio-3-2 .dawask-item {
    aspect-ratio: 3 / 2;
}

.ratio-16-9 .dawask-item {
    aspect-ratio: 16 / 9;
}

.ratio-21-9 .dawask-item {
    aspect-ratio: 21 / 9;
}

.ratio-3-4 .dawask-item {
    aspect-ratio: 3 / 4;
}

.ratio-2-3 .dawask-item {
    aspect-ratio: 2 / 3;
}

.ratio-4-5 .dawask-item {
    aspect-ratio: 4 / 5;
}

.ratio-5-7 .dawask-item {
    aspect-ratio: 5 / 7;
}

.ratio-11-14 .dawask-item {
    aspect-ratio: 11 / 14;
}

.ratio-9-16 .dawask-item {
    aspect-ratio: 9 / 16;
}

.alignwide {
    width: 100%;
}

.alignfull {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
}