/* Six draft Why photographs from one 3 by 2 branded contact sheet. */
html.draft-v3 .why-grid .why-i.flip[data-why-photo] .flip-f::before {
  background-image: var(--plate) !important;
  background-size: calc(3 * var(--why-tile-w)) calc(2 * var(--why-tile-h)) !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html.draft-v3 .why-grid .why-i.flip[data-why-photo] .flip-f::after {
  background: linear-gradient(180deg,
    rgba(8, 20, 28, 0) 0%,
    rgba(8, 20, 28, 0) 54%,
    rgba(8, 20, 28, .28) 73%,
    rgba(8, 20, 28, .78) 100%) !important;
}

/* Keep the branded left side of tankers inside narrow phone cards. */
html.draft-v3 .why-grid .why-i.flip[data-why-photo="1"] .flip-f::before { background-position: 0 calc(50% + var(--why-tile-h) / 2) !important; }
html.draft-v3 .why-grid .why-i.flip[data-why-photo="2"] .flip-f::before { background-position: 50% calc(50% + var(--why-tile-h) / 2) !important; }
html.draft-v3 .why-grid .why-i.flip[data-why-photo="3"] .flip-f::before { background-position: calc(50% - (var(--why-tile-w) + var(--why-card-w)) / 2) calc(50% + var(--why-tile-h) / 2) !important; }
html.draft-v3 .why-grid .why-i.flip[data-why-photo="4"] .flip-f::before { background-position: calc(50% + var(--why-tile-w)) calc(50% - var(--why-tile-h) / 2) !important; }
html.draft-v3 .why-grid .why-i.flip[data-why-photo="5"] .flip-f::before { background-position: 50% calc(50% - var(--why-tile-h) / 2) !important; }
html.draft-v3 .why-grid .why-i.flip[data-why-photo="6"] .flip-f::before { background-position: calc(50% - var(--why-tile-w)) calc(50% - var(--why-tile-h) / 2) !important; }