.masonry-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-large);
}

.masonry-block.reverse {
    flex-direction: row-reverse;
}

.masonry-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-medium);
    max-width: 675px;
}

.masonry-content div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

.masonry-content div > :first-child {
    color: var(--primary-light);
}

.masonry-gallery {
    display: flex;
    gap: var(--spacing-small);
    max-width: 816px;
    width: 100%;
}

.masonry-left, .masonry-right {
    display: flex;
    max-width: 392px;
    width: 100%;
}

.masonry-left {
    flex-direction: column;
    gap: var(--spacing-small);
}

.masonry-right {
    align-items: center;
}

.masonry-item {
    display: flex;
    width: 100%;
}

.masonry-left .masonry-item {
    height: 419px;
}

.masonry-right .masonry-item {
    height: 524px;
}

.masonry-item img {
    border-radius: var(--border-radius-sm, 16px);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.masonry-block.reverse .masonry-left .masonry-item:first-child {
    height: 305px;
}

.masonry-block.reverse .masonry-left .masonry-item:nth-child(2) {
    height: 466px;
}

.masonry-block.reverse .masonry-right .masonry-item {
    height: 463px;
}

@media (max-width: 1400px) and (min-width: 1200px) {

    .masonry-gallery {
        flex-direction: column;
    }

}

@media (max-width: 1200px) {

    .masonry-block, .masonry-block.reverse {
        flex-direction: column;
    }

}

@media (max-width: 768px) {

    .masonry-left {
        flex: 0 0 66%;
        flex-direction: row;
    }

    .masonry-right {
        align-items: center;
        flex: 1;
    }

    .masonry-item {
        height: auto !important;
    }

}

@media (max-width: 480px) {

    .masonry-gallery {
        flex-direction: column;
    }

    .masonry-left {
        flex-direction: column;
    }

}