*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #f6f4ff;
  color: #120d2a;
  font-family: "Manrope", sans-serif;
}

a { color: inherit; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
}

header a {
  background: #120d2a;
  color: #f3ff4a;
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

h1 {
  margin: 0.5rem 1.25rem 1.5rem;
  font-family: "Syne", sans-serif;
  font-size: clamp(3rem, 10vw, 7.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

.bento {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 220px 220px 180px;
  gap: 0.75rem;
  padding: 0 1.25rem 3rem;
}

.bento article {
  padding: 1.25rem;
  border-radius: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bento h2 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: 1.8rem;
}

.bento p { margin: 0.35rem 0 0; }

.t1 { background: #2b1bff; color: #f3ff4a; grid-row: span 2; }
.t2 { background: #ff5a1f; color: #fff6ea; }
.t3 { background: #111; color: #7dffb3; }
.t4 { background: #f3ff4a; color: #120d2a; }
.t5 { background: #ffd0e6; color: #120d2a; grid-column: 1 / -1; }

@media (max-width: 700px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .t1, .t5 { grid-row: auto; grid-column: auto; }
}