.galeri {
   background: white;
   padding: 16px;
   box-shadow: var(--card-shadow);
}

.galeri__header {
   padding-bottom: 12px;
   border-bottom: 2px solid hsl(122, 2%, 30%);
   margin-bottom: 16px;
}
.galeri__header p {
   margin-top: 8px;
}

.galeri__image-list {
   display: grid;
   gap: 4px;
}
.galeri__image-list img {
   width: 100%;
}

@media screen and (width < 768px) {
   main.max-width {
      padding-inline: 0;
   }
}

@media screen and (width >= 768px) {
   .galeri {
      border-radius: 8px;
   }

   .galeri__image-list {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   }
   .galeri__image-list img {
      aspect-ratio: 4/3;
      object-fit: cover;
   }
}