/*
  AUTO GRID
  Set the minimum item size with `--auto-grid-min-size` and you'll
  get a fully responsive grid with no media queries.
*/
.auto-grid {
    --auto-grid-min-size: 16rem;
    list-style-type: none;
}

    .auto-grid > * {
        max-width: 400px;
    }

        .auto-grid > * + * {
            margin-top: 1rem;
        }

@supports(display: grid) {
    .auto-grid {
        display: inline-flex;
        grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
        grid-gap: 1rem;
    }

        .auto-grid > * {
            max-width: unset;
        }

            .auto-grid > * + * {
                margin-top: unset;
            }
}

/*
  WRAPPER
  A utility with a max width that contains child elements and horizontal centers them
*/
.wrapper-image {
    float: left;
    max-width: 65rem;
    margin: 0 auto;
    padding: 0 1rem;
}


/* Presentational styles */

/*body {
    background: #efefef;
    padding: 1rem 0;
    line-height: 1.4;
    font-family: sans-serif;
}*/

.li-image {
    text-align: center;
    font-size: 1.2rem;
    background: #F7F9F9;
    color: #000;
}

.image-list {
    width: 100%;
}

.gallery_grid_image_caption {
    display: grid;
    text-align: left;
    color: #34495E;
}

.image-name {
    font-weight: 500;
    font-size: 1.1rem;
}

.image-size {
    font-size: 12px;
}

.link-del {
    font-size: 0.9rem;
}