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

@font-face {
  font-family: "LasVegasJackpot";
  src: url("/assets/fonts/LasVegas Jackpot Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}


/* Main artwork container */

.artwork-section {
  max-width: 1100px;

  margin: 60px auto;

  padding: 40px;

  background-color: rgba(26, 22, 19, 0.92);

  border: 5px solid rgba(255,255,255,0.85);

  box-shadow:
    0 0 20px rgba(0,0,0,0.5),
    0 0 60px rgba(255,255,255,0.05);

  backdrop-filter: blur(4px);

  color: white;
}


/* Main title */

.artwork-section h1 {
  margin-top: 0;
  margin-bottom: 10px;

  font-size: 56px;

  font-family: sans-serif;

  color: white;

  text-align: center;
}


/* Introduction */

.artwork-introduction {
  max-width: 700px;

  margin: 0 auto 50px auto;

  font-family: sans-serif;

  font-size: 22px;

  line-height: 1.5;

  text-align: center;

  color: rgba(255,255,255,0.85);
}


/* Year sections */

.artwork-year-section {
  margin-bottom: 60px;
}


/* Year title */

.artwork-year {
  margin-top: 0;
  margin-bottom: 25px;

  padding-bottom: 10px;

  border-bottom: 3px solid rgba(255,255,255,0.25);

  font-family: "LasVegasJackpot", sans-serif;

  font-size: 38px;

  color: #E23950;
}


/* Artwork grid */

.artwork-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(200px, 1fr));

  gap: 20px;

  align-items: start;
}


/* Artwork link */

.artwork-card {
  display: block;

  overflow: hidden;

  line-height: 0;

  background-color: rgba(255,255,255,0.05);

  border: 3px solid rgba(255,255,255,0.18);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}


/* Hover */

.artwork-card:hover {
  transform: translateY(-5px);

  border-color: white;

  background-color: rgba(255,255,255,0.1);
}


/* Artwork thumbnail */

.artwork-card img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  transition: transform 0.25s ease;
}


/* Slight zoom on hover */

.artwork-card:hover img {
  transform: scale(1.03);
}


/* Links */

.artwork-section a {
  color: white;
}


/* Mobile */

@media (max-width: 700px) {

  .artwork-section {
    margin: 30px 15px;

    padding: 25px;
  }

  .artwork-section h1 {
    font-size: 42px;
  }

  .artwork-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

}