.lf-tile-container {
    container-type: inline-size;
    container-name: lf-tile-cont;
    /*
       Automatic, responsive columns:
       Explanation:
       - auto-fill: fill as many columns as will fit in the container
       - minmax(200px, 1fr): each tile is at least 200px wide, and at most “fill up the remaining space”
    */
    &.lf-tile-size-small {
        display: grid;              /* Enable CSS Grid */
        gap: 1rem;                  /* Optional gap between tiles */
        margin: 1.5rem 0 0.5rem 0;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    &.lf-tile-size-medium {
        display: grid;              /* Enable CSS Grid */
        gap: 1rem;                  /* Optional gap between tiles */
        margin: 1.5rem 0 0.5rem 0;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    &.lf-top-margin-no {
        margin-top: 0;
    }
    .lf-item-lead-invers {
        border-top-left-radius: calc(var(--lf-radius) - var(--lf-border));
        border-top-right-radius: calc(var(--lf-radius) - var(--lf-border));
        .lf-item-figure {
            padding-bottom: 5px;
        }
    }
}

/* small phones handling */
@media screen and (max-width: 480px) {
    .lf-tile-container.lf-tile-size-small {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

.lf-tile-size-full .lf-item {
    margin: 1rem 0;
    width: 100%;
}
.lf-tile-size-full.lf-top-margin-no .lf-item {
    margin-top: 0;
}