.lf-list-container {
    container-type: inline-size;
    container-name: lf-list-cont;
    margin-top: 1.5rem;

    &.lf-top-margin-no {
        margin-top: 0;
    }

    /*
       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-item {
        display: flex;
        flex-direction: row;

        .lf-item-figure {
            padding: 10px;
            flex: 0 0 33.33%;

            .lf-item-copyright {
                top: 10px;
                right: 10px;
            }

            .lf-item-image {
                border-radius: var(--lf-radius);
            }
        }

        .lf-item-lead {
            border-top-left-radius: calc(var(--lf-radius) - var(--lf-border));
            border-bottom-left-radius: calc(var(--lf-radius) - var(--lf-border));
        }

        .lf-item-content {
            display: inline-block;
            padding: 10px;
            flex: 1;

            > :first-child {
                margin-top: 0.3rem;
            }
        }
    }

    .lf-item-container {
        margin-bottom: 1.5rem;
    }

    hr {
        margin-top: -0.5em;
        margin-bottom: 1em;
    }

    .lf-item-figure {
        overflow: hidden; /* hides the scaled edges */
    }

    .lf-item-figure img {
        transition: transform 0.3s ease
            box-shadow .25s ease; /* smooth scaling */
        transform-origin: center center; /* zoom from center */
    }

    .lf-item:hover figure img {
        /* transform: scale(1.05); */
        filter: brightness(110%) contrast(100%);
        box-shadow: 0 4px 8px rgba(0,0,0,.25);
    }

    /*
    &.lf-list-size-small {
        display: grid;
        gap: 1rem;
        margin: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    &.lf-list-size-medium {
        display: grid;
        gap: 1rem;
        margin: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }*/
}

.lf-list-container .lf-item.lf-item-lead-image {
    flex-direction: column;
}

.lf-list-container .lf-item:hover img {
    transform: none;
}

@container lf-item-container (max-width: 200px) {
    .lf-list-container .lf-item-content {
        font-size: 80%;
    }
}

@container lf-item-container (min-width: 600px) {
    .lf-list-container {
        .lf-item.lf-item-lead-image {
            flex-direction: row;
        }
        .lf-item.lf-item-lead-image .lf-item-lead {
            flex: 0 0 40%;
        }

        .lf-item-content {
            font-size: 100%;
        }
    }
}

@container lf-item-container (min-width: 750px) {
    .lf-list-container {
        .lf-item.lf-item-lead-image .lf-item-lead {
            flex: 0 0 35%;
        }

        .lf-item-content {
            font-size: 100%;
        }
    }
}

@container lf-item-container (min-width: 900px) {
    .lf-list-container {
        .lf-item.lf-item-lead-image .lf-item-lead {
            flex: 0 0 32%;
        }

        .lf-item .lf-item-content {
            font-size: 100%;
            padding-left: 20px;
        }
    }
}

@container lf-item-container (min-width: 1050px) {
    .lf-list-container {
        .lf-item.lf-item-lead-image .lf-item-lead {
            flex: 0 0 30%;
        }

        .lf-item-content {
            font-size: 100%;
        }
    }
}

@container lf-item-container (min-width: 1200px) {
    .lf-list-container {
        .lf-item.lf-item-lead-image .lf-item-lead {
            flex: 0 0 400px;
        }

        .lf-item .lf-item-content {
            font-size: 100%;
            padding-left: 30px;
        }
    }
}

/* small phones handling */
@media screen and (max-width: 480px) {
}

/* lead heading */

.lf-list-container {
    .lf-item-lead-heading, .lf-item-lead-icon, .lf-item-lead-nr {
        flex-direction: column;

        .lf-item-lead {
            padding: 10px;
            border-top-left-radius: calc(var(--lf-radius) - var(--lf-border));
            border-top-right-radius: calc(var(--lf-radius) - var(--lf-border));
            border-bottom-left-radius: 0px;
        }

        .lf-item-figure {
            float: right;
            margin-left: 2rem;
            margin-bottom: 1rem;
            width: 40%;
        }

        .lf-item-content {
            padding: 10px 10px 10px 0;
        }

        .lf-nr-heading {
            margin-top: 0.2rem;
            /* margin-left: 0.5rem; */
            font-size: clamp(120%, 2cqw, 200%);
        }

        .lf-item-heading {
            /* margin-left: 0.5rem; */
            font-size: 120%;
        }
    }

    .lf-item-lead-heading:has(.lf-item-lead-invers),
    .lf-item-lead-icon:has(.lf-item-lead-invers),
    .lf-item-lead-nr:has(.lf-item-lead-invers) {
        .lf-item-content {
            padding-left: 1.5em;
        }
    }

    .lf-item.lf-item-lead-icon,
    .lf-item.lf-item-lead-nr {
        flex-direction: row;
        .lf-item-lead {
            border-top-left-radius: calc(var(--lf-radius) - var(--lf-border));
            border-bottom-left-radius: calc(var(--lf-radius) - var(--lf-border));
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            width: 5em;
            flex-shrink: 0;
            padding: 1em;

            .lf-icon {
                flex-shrink: 0;
                align-self: start;
                margin-right: 0;

                svg {
                    width: 3em;
                    height: 3em;
                }
            }
            .lf-nr {
                flex-shrink: 0;
                align-self: start;
                margin-right: 0;
                width: 2.4em;
                height: 2.4em;
            }

        }
        .lf-nr-heading {
            margin-top: 0.2rem;
            /* margin-left: 0.5rem; */
            font-size: 120%;
        }
    }

    .lf-heading-status > img.icon {
        margin-right: 15px;
        width: 25px;
        height: 25px;
    }
}

@container lf-item-container (max-width: 200px) {
}

@container lf-item-container (min-width: 480px) {
    .lf-list-container .lf-item-lead-heading {
        .lf-item-lead {
        }
    }
}

@container lf-item-container (min-width: 800px) {
    .lf-list-container .lf-item.lf-item-lead-heading {
        flex-direction: row;
        .lf-item-lead {
            border-top-left-radius: calc(var(--lf-radius) - var(--lf-border));
            border-bottom-left-radius: calc(var(--lf-radius) - var(--lf-border));
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            width: 33%;
        }
    }
}

@container lf-item-container (min-width: 900px) {
    .lf-list-container .lf-item-lead-heading {
        .lf-item-lead {
        }
    }
}