/*
* { box-sizing: border-box;}
*/
/* The Container */
.box-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    grid-gap: .5rem;
    justify-items: center;
    padding: 0;
}

.box-grid.thumb-small {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    grid-gap: .2rem;
}

/* Styles for the caption overlays */
/* Standard Box: Top Center */
.box-flex {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: center;
  /* padding: .5rem; */
  text-align: center;
  font-size: 1.2rem;
  background-color: #333333;
  color: #d9d9d9;
}

/* Box: Center Center */
.box-flex-center {
  align-items: center;
}

/* Box: Bottom Center */
.box-flex-bottom {
  align-items: flex-end;
}

/* Box: Top Right */
.box-flex-top-right {
  justify-content: flex-end;
}

/* Box: Center Left */
.box-flex-center-left {
  align-items: center;
  justify-content: flex-start;
}

/* Box: Bottom Right */
.box-flex-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
}

.box-img {
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.box-img.thumb-small {
    width: 100px;
    height: 100px;
}

.box-img:hover {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
}

.box-caption {
    position: absolute;
    max-width: 200px;
    margin: 0;
    padding: 2px 5px;
    word-break: break-word;
    font-size: 1rem;
    font-weight: 300;
    background-color: rgba(0,0,0,.5);
    color: #f2f2f2;
    border-radius: 6px;
}


.box-caption.thumb-small {
    max-width: 100px;
}

.box-caption:hover {
  background-color: rgba(0,0,0,.5);
  color: #e6e6e6;
  transition: all ease .5s;
}

/* Styles for multiple caption overlays */

/* align-self: flex-start */
.align-start {
  align-self: flex-start;
}

/* align-self: center */
.align-center {
  -ms-grid-row-align: center;
  align-self: center;
}

/* align-self: flex-end */
.align-end {
  align-self: flex-end;
}