halo-theme-pix/templates/modules/variables/moments-img-style.html

<style th:if="${theme.config.moments.img_style == 'one'}">

    .img_list .list_inner {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
    }

    .img_list span {
        padding: 3px;
        position: relative;
        width: 25%;
        margin: 3px;
    }


    .img_list span:nth-child(1):nth-last-child(4),
    .img_list span:nth-child(3):nth-last-child(2),
    .img_list span:nth-child(4):nth-last-child(1) {
        width: 25%;
    }

    .img_list span:nth-child(2):nth-last-child(3) {
        margin-right: 30%;
    }

    .img_list span img {
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img_list .list_inner span:before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    @media only screen and (max-width:540px) {
        .img_list span {
            width: 30%;
            margin: 2px;
        }
        .img_list span:nth-child(1):nth-last-child(4),
        .img_list span:nth-child(3):nth-last-child(2),
        .img_list span:nth-child(4):nth-last-child(1) {
            width: 30%;
        }
    }


</style>
<style th:if="${theme.config.moments.img_style == 'two'}">
    .img_list span:nth-last-child(1):first-child {
        width: 85%;
    }

    .img_list .list_inner {
        display: grid;
        max-width: 25rem;
        flex-wrap: wrap;
        flex-direction: row;
        grid-template-columns: repeat(3, 1fr);
        align-content: center;
    }

    .img_list span {
        position: relative;
        margin: 3px;
    }

    .img_list .list_inner[num='1'] {
        grid-template-columns: repeat(1, 1fr);
    }

    .img_list .list_inner[num='1'] img {
        aspect-ratio: unset;
        max-height: 30rem;
        max-width: 25rem;
    }

    .img_list .list_inner[num='2'],
    .img_list .list_inner[num='4'] {
        grid-template-columns: repeat(2, 1fr);
    }

    .img_list .list_inner[num='3'],
    .img_list .list_inner[num='6'],
    .img_list .list_inner[num='8'] {
        grid-template-columns: repeat(3, 1fr);
    }

    .img_list .list_inner[num='5'] {
        grid-template-columns: repeat(6, 1fr);
    }

    .img_list .list_inner[num='7'] {
        grid-template-columns: repeat(4, 1fr);
    }

    .img_list .list_inner[num='3'] span:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3;
    }

    .img_list .list_inner[num='3'] span:nth-child(2) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .img_list .list_inner[num='3'] span:nth-child(3) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .img_list .list_inner[num='5'] span:nth-child(1) {
        grid-area: 1 / 1 / 5 / 5;
    }

    .img_list .list_inner[num='5'] span:nth-child(2) {
        grid-area: 1 / 5 / 3 / 7;
    }

    .img_list .list_inner[num='5'] span:nth-child(3) {
        grid-area: 3 / 5 / 5 / 7;
    }

    .img_list .list_inner[num='5'] span:nth-child(4) {
        grid-area: 5 / 1 / 7 / 4;
    }

    .img_list .list_inner[num='5'] span:nth-child(5) {
        grid-area: 5 / 4 / 7 / 7;
    }

    .img_list .list_inner[num='5'] span:nth-child(4) img,.img_list .list_inner[num='5'] span:nth-child(5) img {
        height: 127.35px;
    }

    .img_list .list_inner[num='6'] span:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3;
    }

    .img_list .list_inner[num='6'] span:nth-child(2) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .img_list .list_inner[num='6'] span:nth-child(3) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .img_list .list_inner[num='6'] span:nth-child(4) {
        grid-area: 3 / 1 / 4 / 2;
    }

    .img_list .list_inner[num='6'] span:nth-child(5) {
        grid-area: 3 / 2 / 4 / 3;
    }

    .img_list .list_inner[num='6'] span:nth-child(6) {
        grid-area: 3 / 3 / 4 / 4;
    }

    .img_list .list_inner[num='7'] span:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3;
    }

    .img_list .list_inner[num='7'] span:nth-child(2) {
        grid-area: 1 / 3 / 3 / 5;
    }

    .img_list .list_inner[num='7'] span:nth-child(3) {
        grid-area: 3 / 1 / 5 / 3;
    }

    .img_list .list_inner[num='7'] span:nth-child(4) {
        grid-area: 3 / 3 / 4 / 4;
    }

    .img_list .list_inner[num='7'] span:nth-child(5) {
        grid-area: 3 / 4 / 4 / 5;
    }

    .img_list .list_inner[num='7'] span:nth-child(6) {
        grid-area: 4 / 3 / 5 / 4;
    }

    .img_list .list_inner[num='7'] span:nth-child(7) {
        grid-area: 4 / 4 / 5 / 5;
    }

    .img_list .list_inner[num='8'] span:nth-child(8) {
        grid-area: 3 / 2 / 4 / 4;
    }

    .img_list .list_inner[num='8'] span:nth-child(8) img {
        aspect-ratio: 3;
    }


    .img_list span img {
        aspect-ratio: 1;
        display: block;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>