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

/* Background + type */
body {
  font-family: Arial, sans-serif;
  background-image: url(images/Backgrounds/3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.6;
}

/* Make the whole image + title clickable */
.soundbooks a,
.gift a,
.commission a {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: center; /* centers the text under each image */
}

/* Make sure everything stays above background */
.soundbooks,
.gift,
.commission {
  position: relative;
  z-index: 5;
}

/* === Desktop layout === */
@media (min-width: 701px) {
  body {
    margin: 0;
    height: 100vh;
    display: flex;              /* use flexbox to line them up evenly */
    justify-content: center;    /* center horizontally */
    align-items: center;        /* center vertically on screen */
    gap: 60px;                  /* spacing between images */
    background-color: #010101;
    background-image: url(images/Backgrounds/3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .soundbooks,
  .gift,
  .commission {
    position: static; /* remove old offsets */
    text-align: center;
  }

  .soundbooks img,
  .gift img,
  .commission img {
    width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .soundbooks h2,
  .gift h2,
  .commission h2 {
    margin-top: 10px;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
  }
}

/* === Mobile layout (stack vertically) === */
@media (max-width: 700px) {
  body {
    display: block;
    height: auto;
    padding: 16px 12px;
    background-color: #010101;
  }

  .soundbooks,
  .gift,
  .commission {
    position: static;
    margin: 0 0 24px;
    text-align: center;
  }

  .soundbooks img,
  .gift img,
  .commission img {
    width: 100%;
    height: auto;
    max-width: 420px;
    margin: 0 auto;
    display: block;
  }

  .soundbooks h2,
  .gift h2,
  .commission h2 {
    color: #fff;
    margin-top: 8px;
    font-size: 1.1rem;
    text-align: center;
  }
}