/* =========================
   style.css — Завдання 2
   ========================= */

body {
  margin: 18px;
  font-family: Arial, Helvetica, sans-serif;
  background: #fafafa;
  color: #111;
}
h1 { margin: 0 0 12px 0; font-size: 20px; }
h2 { margin: 14px 0; font-size: 16px; }

.examples {
  display:flex;
  gap: 28px;
  flex-wrap:wrap;
  align-items:flex-start;
}

/* --- Варіант 1: position --- */
.pos-container {
  width: 120px;
  height: 120px;
  position: relative;
  background: #b30000;
  border-radius: 6px;
}
.pos-square {
  position: absolute;
  left: 14px; top: 14px;
  width: 92px; height: 92px;
  background: #b30000;
  border-radius: 4px;
}
.pos-cross {
  position: absolute;
  left: 14px; top: 14px;
  width: 92px; height: 92px;
}
.pos-bar {
  position: absolute;
  background: #fff;
  border-radius: 3px;
}
.pos-bar.h { width: 56px; height: 16px; top: 38px; left: 18px; }
.pos-bar.v { width: 16px; height: 56px; top: 18px; left: 38px; }

/* --- Варіант 2: transform --- */
.transform-icon {
  width: 120px;
  height: 120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #b30000;
  border-radius: 6px;
}
.tx-square {
  width: 84px;
  height: 84px;
  background: #b30000;
  border-radius: 4px;
  position: relative;
}
.tx-square::before,
.tx-square::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: #fff;
  transform-origin: center;
  border-radius: 3px;
}
.tx-square::before {
  width: 65%; height: 19%;
  transform: translate(-50%, -50%);
}
.tx-square::after {
  width: 19%; height: 65%;
  transform: translate(-50%, -50%);
}

/* Адаптив */
@media (max-width:520px) {
  .examples { gap: 14px; }
  .pos-container, .transform-icon { width: 100px; height: 100px; }
  .pos-square, .tx-square { width: 72px; height: 72px; }
}