/* Reset */
:root {
  --container-padding: 0.5em;
  --container-width: 95%;
  --gallery-item-border-radius: 0.4em; /* Gallery styles */
  --gallery-gap: 0.7em;                /* Gallery styles */
  --gallery-items-per-row: 3;          /* Gallery styles */
  font-family: dejavu sans, metropolisregular;
}

* { box-sizing: border-box;
}

@font-face {
    font-family: metropolisregular;
    src: url('Lettertypes/metropolis-regular-webfont.woff2') format('woff2');
    src: url('Lettertypes/metropolis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { font-family: Gotham; src: url('Gotham-Regular.otf'); } 

@font-face { font-family: Rony; src: url('RonysiswadiArchitect5-1GErv.ttf'); }


body {
  margin: 0;
  font-family: 1em/160% rony;
  justify-content: center;
  align-items: center;
  background-color: Grey;
  background-image: url("img/bg-gradient-bruin2.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
  font-size:calc(1vw + 0.5vh + 0.5vmin);
}

img {
  max-width: 100%;
  vertical-align: middle;
  height: auto;
  border-radius: 0.3em; 
  object-fit: cover;
  transform: scale(1.0);
  transition: transform 0.4s ease;
  overflow: hidden;
}

h1 {
  margin: 1em 0.2em 0.2em; color: brown; text-align: center; text-shadow: 1px 1px 2px #000000;
}

h5 {
  margin: 0; color: black; text-align: center;
  background-image: linear-gradient(45deg, black, brown);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0.2px 0.2px 0.1px #000000;
}

figcaption {
  text-align: center;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-style: italic;
}

a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: brown;
}

.fade-heading {
  /* Adjust these colors and direction as needed */
  background: linear-gradient(to right, #ff6a00, #ee0979, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;       /* Show only the gradient */
}

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

.img-gallery {
  display: flex; 
  flex-wrap: wrap;
  align-content: stretch;
  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)
    );
}

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

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

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

.img-gallery__item {
  figure {
    margin: 0;
    padding: 0.3em;
    border: solid black 0.18em;
    border-radius: 0.5em;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.65);
    background-color: white;
    transition: all 0.25s ease-in-out;
 &:hover img {
        transform: scale(1.1); transition: transform 0.4s ease;
    }
    &:hover {
      border-color: coral;
    }
  }
}

/* [1] The container */
.img-hover-zoom {
  height: auto; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  border-radius: 0.5em; 
}