.visual.block {
    width: 100%;
}

.visual.block .inner {
    position: relative;
}

/* 1 column */
.visual.block.c1 .inner {
    -webkit-grid-column: span 12;
    grid-column: span 12;
}

/* 2 columns */
.visual.block.c2 .inner {
    -webkit-grid-column: span 6 / span 6;
    grid-column: span 6 / span 6;
}

/* 3 columns */
.visual.block.c3 .inner {
    -webkit-grid-column: span 4 / span 4;
    grid-column: span 4 / span 4;
}

/* List mode */
.visual.block.list-mode .inner {
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
}

.visual.block.c1 .visual-container {
    width: 100%;
}

.visual.block .visual-container .hover {
    opacity: 1;
}

.visual.block .hover img,
.visual.block .hover video {
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

.visual-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    pointer-events: none;
}

.visual-grid-overlay div {
    pointer-events: all;
}

@media screen and (min-width: 741px) {
    .visual.block.box.c2 .aspect-container,
    .visual.block.box.c3 .inner:not(:first-child) .aspect-container {
        padding-bottom: 100% !important;
    }

    .visual.block.horizontal.c2 .aspect-container,
    .visual.block.horizontal.c3 .inner:not(:first-child) .aspect-container {
        padding-bottom: 76% !important;
    }

    .visual.block.vertical.c2 .aspect-container,
    .visual.block.vertical.c3 .inner:not(:first-child) .aspect-container {
        padding-bottom: 138% !important;
    }
}

@media screen and (max-width: 740px) {
    .visual.block {
        display: block;
    }

    .visual.block .inner:not(:last-child) {
        margin-bottom: var(--padding-general);
    }

    .visual.block .inner:last-child {
        margin-bottom: 0;
    }
}