.grid {
    &.custom-grid__50_50 {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--spacing) * 8);

        @media screen and (max-width: 991px) {
            grid-template-columns: 1fr;
            gap: calc(var(--spacing) * 8);
        }
    }

    &.custom-grid__25_75 {
        grid-template-columns: 1fr 2fr;
        gap: calc(var(--spacing) * 16);
    }

    &.custom-grid__75_25 {
        grid-template-columns: 2fr 1fr;
        gap: calc(var(--spacing) * 16);
    }

    &.custom-grid__33_33_33 {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--spacing) * 16);

        @media screen and (max-width: 1280px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: calc(var(--spacing) * 8);
        }
    }

    &.custom-grid__25_25_25_25 {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(var(--spacing) * 16);
    }
}

.masonry-images-grid {
    width: 100%;

    .masonry-images-grid__sizer,
    .masonry-images-grid__image {
        width: calc(33% - 1rem);

        @media screen and (max-width: 1280px) {
            width: calc(50% - 1rem);
        }

        @media screen and (max-width: 768px) {
            width: 100%;
        }
    }
}