/* /Shared/ImageGrid.razor.rz.scp.css */
.container[b-98ieosghuz] {
    display: flex;
    flex-direction: row; /* default value so optional - lines children in a row */
    flex-wrap: wrap; /* allows children to wrap */
    justify-content: space-between; /* space children evenly over row */
}

.responsive[b-98ieosghuz] {
    flex-basis: 25%; /* makes the width 25% */
    /* if you don't want a fixed height image, I would use the padding top trick for aspect ratio divs */
    position: relative;
    padding-top: 30%;
}

    .responsive img[b-98ieosghuz] {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
    }


@media only screen and (max-width: 700px) {
    .responsive[b-98ieosghuz] {
        flex-basis: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive[b-98ieosghuz] {
        flex-basis: 100%;
        padding-top: 50%;
    }
}