@media screen and (min-width: 640px) {
    .f-image-cards--layout-1 .f-image-card:nth-of-type(1) {
        grid-row: span 2/span 2;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-2 .f-image-card:nth-of-type(2) {
        grid-row: span 2/span 2
    }

    .f-image-cards--layout-3 .f-image-card:nth-of-type(5) {
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-5 .f-image-card:nth-of-type(5) {
        grid-column: span 4/span 4
    }
}

@media screen and (min-width: 1024px) {
    .f-image-cards[data-desktop-gap="0"] .f-mixed-layout__inner {
        border-radius: var(--blocks-radius);
        overflow: hidden;
        -webkit-mask-image: -webkit-radial-gradient(white, black)
    }

    .f-image-cards[data-desktop-gap="0"] .f-image-card__inner {
        --blocks-radius: 0
    }

    .f-image-cards--layout-3 .f-image-card:nth-of-type(1) {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-3 .f-image-card:nth-of-type(4) {
        grid-row-end: 4;
        grid-row-start: 2;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-4 .f-image-card:nth-of-type(1) {
        grid-row-end: 3;
        grid-row-start: 1;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-4 .f-image-card:nth-of-type(2) {
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-4 .f-image-card:nth-of-type(3) {
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-4 .f-image-card:nth-of-type(4) {
        grid-row-end: 4;
        grid-row-start: 3;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-4 .f-image-card:nth-of-type(5) {
        grid-row-end: 4;
        grid-row-start: 3;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-5 .f-image-card:nth-of-type(1) {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column: span 2/span 2
    }

    .f-image-cards--layout-5 .f-image-card:nth-of-type(4) {
        grid-row-end: 3;
        grid-row-start: 2;
        grid-column: span 2/span 2
    }
}

@media screen and (max-width: 767px) {
    .f-image-cards .f-mixed-layout:not(.f-mixed-layout--mobile-scroll) .f-image-card--content-stack {
        margin-bottom: 30px
    }
}
