/* Devices bento */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 32px;
  overflow: hidden;
  padding: 36px 36px 0;
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  background: var(--glass);
}

.tile-copy {
  display: grid;
  gap: 12px;
}

.tile-eyebrow {
  color: var(--cream-soft);
  font-size: 15px;
  font-weight: 780;
}

.tile h3 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.12;
}

.tile p {
  max-width: 460px;
  color: var(--cream-muted);
  font-size: 17px;
  line-height: 1.7;
}

.tile-duo {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  padding: 44px;
}

.duo-visual {
  position: relative;
  filter: drop-shadow(0 34px 60px rgb(17 19 34 / 0.34));
}

.duo-inner {
  width: 100%;
}

.watch-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4%;
  margin-bottom: -26%;
  filter: drop-shadow(0 24px 40px rgb(17 19 34 / 0.34));
}

.watch-pair img {
  width: 42%;
}

.watch-pair img:last-child {
  margin-top: 12%;
}

.tile-mac,
.tile-widgets,
.tile-face {
  grid-template-rows: auto 1fr;
}

/* Crop the MacBook frame to the menu bar extra and the lid's top-right corner (x 70–93%, y from 8.5%). */

.mac-menu {
  overflow: hidden;
  align-self: end;
  justify-self: center;
  width: min(66%, 340px);
  aspect-ratio: 0.64;
}

.mac-menu img {
  width: 435%;
  max-width: none;
  margin-top: -24.4%;
  margin-left: -304%;
}

/* Show the upper home screen, where the widget sits, and let the phone run off the tile. */

.widget-phone {
  overflow: hidden;
  align-self: end;
  justify-self: center;
  width: min(80%, 400px);
  aspect-ratio: 980 / 1500;
  filter: drop-shadow(0 24px 40px rgb(17 19 34 / 0.34));
}

.widget-phone img {
  width: 100%;
}

.face-grid {
  display: grid;
  align-self: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin-bottom: 36px;
  filter: drop-shadow(0 20px 32px rgb(17 19 34 / 0.34));
}

/* Keep the watch case and fade the band, so four faces fit in one tile. */

.face-grid img {
  aspect-ratio: 560 / 640;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

@media (max-width: 980px) {
  .pillar-grid,
  .bento,
  .note-inner {
    grid-template-columns: 1fr;
  }

  .tile-duo {
    grid-template-columns: minmax(0, 1fr);
    padding: 36px 36px 64px;
  }

  .watch-pair {
    margin-bottom: -16%;
  }

  .watch-pair img {
    width: min(36%, 260px);
  }
}

@media (max-width: 680px) {
  .pillar h3,
  .tile h3 {
    font-size: 1.6rem;
  }

  .tile {
    gap: 24px;
    padding: 28px 22px 0;
    border-radius: 28px;
  }

  .tile-duo {
    padding: 28px 22px 48px;
  }

  .mac-menu {
    width: 76%;
  }
}