style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background-color: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000000' fill-opacity='0.34'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h1 {
  text-align: center;
  margin: 1.563rem;
  margin-bottom: 2rem;
  font-size: 4rem;
  background: #41e2fb;
  background: -webkit-linear-gradient(to right, #41e2fb, #0a2c66, #41e2fb);
  background: linear-gradient(to right, #41e2fb, #0a2c66, #41e2fb);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Loader */
.loader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
}

.loader img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Image Container */
.image-container {
  /* margin: 0.625rem 25%; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 1.5rem;
  margin: 90px 25px;
}

.image-container img {
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 5px;
}

/* Media Query: Smartphone */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 1.25rem;
  }
  .image-container {
    margin: 0.625rem;
  }
}