/* index.css */

/* Reset defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body styling */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff;
  color: #333;
}

/* Grid container for the landing page thumbnails */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding: 20px;
  transition: opacity 0.5s ease-in;
}

/* Thumbnail container that forces a square crop */
.thumbnail-container {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Creates a 1:1 aspect ratio */
  overflow: hidden;
  /* Removed border-radius for square corners */
}

/* Thumbnail image styling */
.thumbnail-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensures the image fills the container */
  transition: transform 0.3s ease;
}

/* Optional: Remove any hover zoom effect if present */
.thumbnail-container:hover img {
  transform: none;
}