/*This file is not specific to any page, but can be used generically. For example it is used on the Resources template
    Be aware that any changes may affect multiple templates, search for uses of list-container globally to gain awareness of areas affected
*/

.list-container {
    flex-direction: column;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    display: block;
    flex-basis: 70%;
}

    .list-container .list-item-container {
        flex: 1 0 calc(50% - 1em); /* Because of the container padding */
        box-sizing: border-box;
    }

        .list-container .list-item-container img {
            display: inline-block;
            width: 100%;
            max-width: 100%;
            height: 17em;
            object-fit: cover;
        }

            .list-container .list-item-container img:hover {
                filter: brightness(1.2);
                transition: filter 0.3s ease;
            }

        .list-container .list-item-container .list-item--text-container {
            padding: 1em;
            /*min-height: 133px;*/
            padding-bottom: 0;
            padding-left: 0;
            padding-top: 0.5em;
        }

.list-item-container:first-child .list-item--text-container {
    padding-top: 0;
}

    .list-item-container:first-child .list-item--text-container h3 {
        margin-top: 0;
    }

.metadata p {
    margin: 0;
}

    .metadata p:last-child {
        margin-bottom: 2em;
    }

@media (max-width: 750px) {
    .list-container {
        flex-direction: column;
    }
}

@media (min-width: 1440px) {
    .list-container .list-item-container img {
        height: 19em;
    }
}