.c-press-image-list {
    list-style: none;
    margin: 0;
    padding: 0;

    li:not(:last-child) {
        border-bottom: 1px solid theme('colors.gray.100');
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.c-press-image-preview {
    // This media query is not in the theme.
    @media screen and (min-width: 40rem) {
        display: flex;

        figcaption {
            margin-top: 0;
        }
    }
}

.c-press-image-preview__title {
    font-size: 1.5rem;

    a {
        text-decoration: none;
        color: theme('colors.primary.600');
    }
}

.c-press-image-preview__image-link {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-bottom: 1rem;
    height: 10rem;
    width: 100%;

    img {
        display: block;
        position: absolute;
        z-index: 1;
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    @screen sm {
        height: 15rem;
    }

    @media screen and (min-width: 40rem) {
        flex-shrink: 0;
        margin-right: 1.5rem;
        width: 38.2%;
    }
}

.c-press-image-preview__meta {
    margin-bottom: .75rem;

    tr {
        background: transparent;
    }

    tr:nth-child(odd) {
        background: transparent;
    }

    th {
        padding-left: 0;
    }

    th,
    td {
        vertical-align: top;
    }

    @screen md {
        font-size: 1rem;
    }
}

.c-press-image-preview__description {
    font-size: 1rem;
}

// When the list is displayed in the image-archive.
.c-press-image-preview-list--page {
    display: flex;
    flex-wrap: wrap;

    li:not(:last-child) {
        border: 0;
        margin-bottom: 1rem;
    }

    .c-press-image-preview {
        display: block;
        border: 1px solid theme('color.gray.400');
        height: 100%;

        figcaption {
            padding: 0 1rem 1rem;
        }
    }

    .c-press-image-preview__image-link {
        width: 100%;
    }

    @screen md {
        margin: 0 1rem;
        justify-content: space-between;

        li {
            width: 48%;
        }
    }

    @screen xl {
        li {
            width: 32%;
        }
    }
}
