@import
    '../node_modules/@tiny-components/plain-ui/src/scss/plain-ui',
    'styles';

.tiny-masonry__item {
    line-height: 0;
 
    span {
        margin: 1em;
        position: absolute;
        top: 0;
        left: 0;
        padding: 1em 0.5em;
        background: black;
        color: white;
        z-index: 1;
    }

    &-inner {
        position: relative;
    }

    &:nth-child(3n+1) { 
        img {
            height: 300px;
        } 
    } 

    &:nth-child(3n+2) { 
        img {
            height: 500px;
        } 
    } 

    &:nth-child(3n) { 
        img {
            height: 400px;
        } 
    } 
}

img {
    width: 100%;
    object-fit: cover;
}