01_images.scss

$campfire: image-url("campfire.png");
$campfire-2x: image-url("campfire@2x.png");
$star: image-url("star.png");
$tree: image-url("tree.png");
$campfire-logo: image-url("campsite.png");
$next-arrow: image-url("travel-camp-to-left.png");
$prev-arrow: image-url("travel-camp-to-right.png");

$ants-fruits-flowers-eggs: image-url("ants-fruits-flowers-eggs.png");
$boomerang: image-url("boomerang.png");
$bush-berry: image-url("bush-berry.png");
$campsite: image-url("campsite.png");
$digging-sticks: image-url("digging-clapping-sticks.png");
$emu: image-url("emu-2.png");
$hole-cloud-nest: image-url("hole-cloud-nest.png");
$honey-ant-site: image-url("honey-ant-site.png");
$honey-ant: image-url("honey-ant.png");
$meeting-place: image-url("meeting-place.png");
$people-sitting: image-url("people-sitting.png");
$person: image-url("person.png");
$rain: image-url("rain.png");
$grub: image-url("witchetty-grub.png");
$woomera: image-url("woomera.png");
$yam: image-url("yam-plant.png");

02_cards.scss

$android-card-height: 210px;

%card-shape {
  height: $android-card-height;
  width: $android-card-height/1.5;
  text-align: center;
  @include border-radius( 30px );
}

%card {
  @extend %card-shape;
  background-color: $off-white;
  background-image: $campfire-logo;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80% auto;
  @include box-shadow( 0 1px 3px 0 rgba(0,0,0, .4) );
  $symbols: (
    $ants-fruits-flowers-eggs,
    $boomerang,
    $bush-berry,
    $campsite,
    $digging-sticks,
    $emu,
    $hole-cloud-nest,
    $honey-ant-site,
    $honey-ant,
    $meeting-place,
    $people-sitting,
    $person,
    $rain,
    $grub,
    $woomera,
    $yam
  );

  $symbols-count: length($symbols);
  @for $i from 1 through $symbols-count {
    $current-symbol: nth($symbols, $i);
    &:nth-of-type(#{$i}) { background-image: $current-symbol; }
  }
}//%card