/* BRASA — BETTER SHARED. The cream breath in the middle of the evening;
   photography deliberately breaks out of the grid. */

.sharing {
  padding-block: clamp(5rem, 13vh, 10rem);
  overflow: hidden;
}

.sharing__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 5vw, 5rem);
  align-items: center;
}

.sharing__copy { display: grid; gap: 1.4rem; align-content: start; }
.sharing__copy .display { margin-block: .4rem .2rem; }

.sharing__media {
  position: relative;
  margin-right: calc(var(--gutter) * -1.6);
}
.sharing__media .frame { aspect-ratio: 5 / 4; border-radius: var(--r-lg); }

.sharing__inset {
  position: absolute;
  left: clamp(-6rem, -7vw, -2.5rem);
  bottom: clamp(-3rem, -4vw, -1.5rem);
  width: clamp(140px, 22%, 240px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(21, 17, 15, .6);
  border: 6px solid var(--cream);
}
.sharing__inset img { width: 100%; height: 100%; object-fit: cover; }

.sharing__quote {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 900px) {
  .sharing__grid, .sharing__quote { grid-template-columns: 1fr; }
  .sharing__media { margin-right: calc(var(--gutter) * -1); }
  /* The inset used to cover the right half of the photograph from the middle
     down — exactly where the table is laughing. Smaller and dropped below the
     frame, it now only crosses the bottom corner, and the block keeps room
     under it so the quote does not slide beneath. */
  .sharing__media { margin-bottom: 3rem; }
  .sharing__inset { width: 30%; left: auto; right: .75rem; bottom: -4.5rem; border-width: 4px; }
}