Module:Layout/hbox.css

/* ===================================================
 * Default layout (mobile)
 * =================================================== */

.pm-hbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pm-hbox .pm-hbox__box {
  flex: 1;
  min-width: 0; /* Prevent overflow with long content */
}

.pm-hbox .pm-hbox__box--centered { text-align: center; }
.pm-hbox .pm-hbox__box--hcenter { justify-items: center; }
.pm-hbox .pm-hbox__box--vcenter { align-items: center; }

/* ===================================================
 * Desktop layout
 * =================================================== */

@media (min-width: 878px) {
  .pm-hbox {
    flex-direction: row;
  }

  /* Fractional width modifiers */
  .pm-hbox .pm-hbox__box--1\/2 { flex: 1 1 50%; }
  .pm-hbox .pm-hbox__box--2\/3 { flex: 1 1 66.6666%; }
  .pm-hbox .pm-hbox__box--1\/3 { flex: 1 1 33.3333%; }
  .pm-hbox .pm-hbox__box--1\/4 { flex: 1 1 25%; }
  .pm-hbox .pm-hbox__box--2\/4 { flex: 1 1 50%; }
  .pm-hbox .pm-hbox__box--3\/4 { flex: 1 1 75%; }
  .pm-hbox .pm-hbox__box--1\/5 { flex: 1 1 20%; }
  .pm-hbox .pm-hbox__box--2\/5 { flex: 1 1 40%; }
  .pm-hbox .pm-hbox__box--3\/5 { flex: 1 1 60%; }
  .pm-hbox .pm-hbox__box--4\/5 { flex: 1 1 80%; }
}

/* ===================================================
 * Layout fixes
 * =================================================== */

.pm-hbox__box .mw-file-element {
  height: auto;
  max-width: 100%;
}