/* Reset */
:root {
  --container-padding: 1.5em;
  --container-width: 1260px;
}

* {
  &,
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

body {
  margin: 0;
  font: 1em/160% sans-serif;
}

img {
  max-width: 100%;
  vertical-align: middle;
  height: auto;
}

a {
	text-decoration: none;
}

.page-container {
  padding: var(--container-padding);
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
}

/* Gallery layout */
:root {
  --gallery-gap: 1.5em;
  --gallery-items-per-row: 1;
}

.img-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gallery-gap);
}

/* 
 * Width of each item = Wi
 * Container width = Wc
 * Gap between items = g
 * Items per row in the gallery = n
 * Total space coverd by gaps = G
 * Available space for items per row = Wa
 *
 * G = g * (n - 1)
 * Wa = Wc - G
 * Wi = Wa / n
 */
.img-gallery__item {
  flex: 0 0
    calc(
      (100% - (var(--gallery-gap) * (var(--gallery-items-per-row) - 1))) /
        var(--gallery-items-per-row)
    );

  img {
    border-radius: var(--gallery-item-border-radius);
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}

@media only screen and (width >= 1024px) {
  .img-gallery {
    --gallery-items-per-row: 4;
  }
}

@media only screen and (768px < width < 1024px) {
  .img-gallery {
    --gallery-items-per-row: 3;
  }
}

@media only screen and (540px < width < 768px) {
  .img-gallery {
    --gallery-items-per-row: 2;
  }
}

/* Gallery styles */
:root {
  --gallery-item-border-radius: 0.4em;
  --gallery-caption-bg-color: hsl(0 0% 0% / 90%);
  --gallery-caption-text-color: white;
}

.img-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--gallery-item-border-radius);

  figure {
    margin: 0;
  }

  figcaption {
    position: absolute;
    inset: auto auto 0 0;

    width: 100%;
    padding: 1rem;

    color: var(--gallery-caption-text-color);
    background-color: var(--gallery-caption-bg-color);

    transition: opacity 0.25s ease-in-out;
    opacity: 0;
  }
	/*
  &:hover {
    figcaption {
      opacity: 1;
    }
  }
  */
}}