@import ~mweb/common/components/safeAreaMixins

/**
 * With two columns, we have: |49vw||49vw|, leaving us with 2 vw leftover.
 * Add padding to edges to get uniform padding, so 2/2 = 1
 */
$two-column-card-outer-padding: 1vw
$two-column-card-outer-padding-percent: 0.01

/**
 * With four columns, we have: |24.75vw||24.75vw||24.75vw||24.75vw|, leaving
 * us with 1 vw leftover. Add padding to edges to get uniform padding,
 * so 1/2 = 0.5
 */
$four-column-card-outer-padding: .5vw
$four-column-card-outer-padding-percent: 0.005

.game-list
  align-content: center
  display: flex
  flex-flow: wrap row

  padding: $four-column-card-outer-padding
  @include safe-area-padding-in-vw-percent($four-column-card-outer-padding-percent)

  width: 100%

  @media (max-width: 540px) and (orientation: portrait)
    padding: $two-column-card-outer-padding
    @include safe-area-padding-in-vw-percent($two-column-card-outer-padding-percent)


  .box-art-card
    // The infinite list tool can't handle margins in calculations, switch to padding.
    margin: 0

    padding: $four-column-card-outer-padding
    @include safe-area-padding-in-vw-percent($four-column-card-outer-padding-percent)

    width: 24.75vw
    @include safe-area-width-in-vw-percent(0.2475)

    @media (max-width: 540px) and (orientation: portrait)
      padding: $two-column-card-outer-padding
      @include safe-area-padding-in-vw-percent($two-column-card-outer-padding-percent)

      width: 49vw
      @include safe-area-width-in-vw-percent(0.49)
