html, body { height: 100%; margin: 0; background: #000; }

.frame {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  padding: 40px 70px 40px 55px;
  box-sizing: border-box;
  align-items: start;
}

.left { display: flex; flex-direction: column; gap: 18px; }

.logo { width: 52px; height: auto; display: block; }

.links {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding-top: 2px;
}

.links a {
  font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fff;
  display: inline-block;
  outline: none;
}

.links a:hover,
.links a:focus-visible,
.links a.active {
  color: rgb(110, 180, 190);
}

.right { display: flex; justify-content: flex-start; align-items: flex-start; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 240px);
  gap: 26px;
  align-content: start;
}

.grid img {
  width: 240px;
  height: 240px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  transform: translateZ(0) scale(1);
  transition: transform 1008ms ease, filter 1008ms ease;
  cursor: pointer;
  outline: none;
}

/* Hover or active: shrink to 50% and glow */
.grid img:hover,
.grid img:focus-visible,
.grid img.active {
  transform: scale(0.5);
  filter: brightness(1.08) contrast(1.05) drop-shadow(0 0 12px rgba(110, 180, 190, 0.22));
}

@media (max-width: 1200px) {
  .frame { grid-template-columns: 300px 1fr; padding: 32px 40px; gap: 32px; }
  .grid { grid-template-columns: repeat(4, 210px); gap: 22px; }
  .grid img { width: 210px; height: 210px; }
}

@media (max-width: 900px) {
  .frame { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .right { justify-content: center; }
  .grid { grid-template-columns: repeat(2, 200px); gap: 18px; }
}