* { box-sizing: border-box; }

:root {
  --black: #000000;
  --white: #ffffff;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #f5f5f5; /* Light grey background to see the white page-wrapper */
}

.page-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--white);
  padding: 40px;
  border: 1px solid var(--black);
}

/* Layout logic */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.gallery__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* The "X" Box Logic - IMPORTANT */
.image-card__placeholder, .placeholder {
  width: 100%;
  height: 100%;
  min-height: 250px; /* Ensures the box has height */
  position: relative; /* REQUIRED for the X lines to stay inside */
  border: 1px solid var(--black);
  background: var(--white);
}

/* Creating the diagonal lines */
.image-card__placeholder::before, .image-card__placeholder::after,
.placeholder::before, .placeholder::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

.image-card__placeholder::before, .placeholder::before {
  background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
}

.image-card__placeholder::after, .placeholder::after {
  background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
}

/* Badges and Buttons */
.social-badge {
  position: absolute;
  bottom: 10px; right: 10px;
  background: var(--white);
  border: 1px solid var(--black);
  padding: 5px;
  display: flex; gap: 5px;
}

.social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; }

.profile-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--black);
  margin-top: 20px;
}