@charset "utf-8";
/* CSS Document */

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: grid;
  place-items: center;      /* centers the whole block horizontally + vertically */
  padding: 24px;
  background: #ffffff;
}

.card {
  width: min(520px, 100%);
  text-align: center;
}

/* Square image container */
.image-wrap {
  width: min(320px, 100%);  /* responsive sizing */
  aspect-ratio: 1 / 1;      /* forces a square box */
  margin: 0 auto 14px;
  overflow: hidden;         /* crops anything outside the rounded corners */
  background: #ffffff;       /* placeholder background while image loads */
}

.image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fills the square, cropping if needed */
  object-position: center;  /* keeps the crop centered */
}

.title {
  margin: 0;
  font-size: clamp(20px, 3.5vw, 30px);
  line-height: 1.15;
}

.subtitle {
  margin: 10px 0 0;
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1.5;
  opacity: 0.8;
}