/* Horizontal screen slider for article bodies.
   Scroll-snap only: no script, so it works with a trackpad, a touch screen,
   the keyboard and a screen reader, and it cannot break the page if JS fails.
   Square corners and hairlines, like every other surface on this site. */

.mg-slider{
  margin: 2.6rem 0 2.2rem;
}

.mg-slider-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#646b7b;
}
.mg-slider-head b{color:#20242e;font-weight:600;letter-spacing:.12em}

.mg-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 0 14px;
  margin:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#b9c4d4 #e8edf3;
}
.mg-track::-webkit-scrollbar{height:6px}
.mg-track::-webkit-scrollbar-track{background:#e8edf3}
.mg-track::-webkit-scrollbar-thumb{background:#b9c4d4}
.mg-track::-webkit-scrollbar-thumb:hover{background:#8e9cb0}

.mg-track > figure{
  flex:0 0 82%;
  max-width:760px;
  scroll-snap-align:center;
  margin:0;
  display:flex;
  flex-direction:column;
}
.mg-track > figure:first-child{scroll-snap-align:start}
.mg-track > figure:last-child{scroll-snap-align:end}

.mg-track img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #d1d8e4;
  background:#fff;
}

.mg-track figcaption{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e2e7ef;
  font-size:14px;
  line-height:1.55;
  color:#5c6373;
}
.mg-track figcaption b{
  display:block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#20242e;
  font-weight:600;
  margin-bottom:4px;
}

@media (max-width:860px){
  .mg-track > figure{flex-basis:88%}
}
@media (max-width:560px){
  .mg-track{gap:12px}
  .mg-track > figure{flex-basis:92%}
  .mg-slider-head{font-size:11px}
}
@media (prefers-reduced-motion: reduce){
  .mg-track{scroll-behavior:auto}
}