/* IMAGE-FOCUSED STYLESHEET */

/* Remove default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Keep page neutral so images dominate */
body {
  background: darkgray;
  padding: 20px;
}

/* Responsive image grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /*noinspection CssBrowserCompatibilityForProperties*/
  gap: 12px;
}

/* Individual image container */
.gallery-item {
  overflow: hidden;
}

/* Images scale perfectly */
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    opacity: .75;
    transition: transform 0.3s ease;
}

/* Subtle hover effect */
.gallery-item:hover img {
    border : 2px white;
    opacity: 1.0;
    transform: scale(1.03);


}