/* === Section 2 === */
.para-2 {
  background-image: url('moongirl1300.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}




 
/* === Section 3: Cards (GRID layout) ========================== */

.para-3 {
  background-color: #222;
  padding: 4rem 2rem;
  display: block; /* remove flex; let grid control layout */
}

/* Card container */
.card-container {
  display: grid;
  gap: 3rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  /* Mobile first: stack */
  grid-template-columns: 1fr;
  justify-items: stretch;
}

/* Cards */
.card,
.card a {
  color: white;
  text-decoration: none;
}

.card {
  min-width: 0;  /* ensures grid items shrink correctly */
  min-height: 38vh;
  height: auto;

  border-radius: 6px;
  border: 0.3rem solid transparent;
  background:
    linear-gradient(#222, #555),
    linear-gradient(45deg, red, yellow, dodgerblue);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow: -10px -10px 20px rgba(0,0,0,0.9);
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* = 769px and = 980px: 2 columns, third card wraps */
@media (min-width: 769px) and (max-width: 980px) {
  .card-container {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

/* = 981px: 3 cards in a row */
@media (min-width: 981px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
/*jan29/26: (important)
Make sure the link behaves like a block and doesn’t break layout*/
.card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-link:focus-visible {
  outline: 3px solid dodgerblue;
}


.card-bottom {
  margin-top: auto;
}
 
 
 
 
/* ================== Section 4 ===================== */
.para-4 {
  background-image: url('poolgirl1300.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.para-4 h2 { margin-bottom: 50vh !important; }