/*
* tiles
*
----------------
* DEPENDENCIES:
----------------
* variables.css
*/

.hero-tile {
  background-color: var(--color-bg-box);
}

.tiles {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.tile-item {
  border-radius: 5px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5em;
  text-align: center;
  width: 100%;
}

.tile-item-link {
  text-decoration: none;
}

/* checkerboard pattern */
.tile-item:nth-child(odd) {
  background-color: var(--color-second);
}

/* checkerboard pattern */
.tile-item:nth-child(odd) .tile-item-link {
  color: var(--color-first);
}

@media screen and (min-width: 665px) {
  .tile-item {
    min-height: 10.5em;
  }
  .tiles-x3 .tile-item {
    flex: 1 0 50%;
  }

  .tile-item:nth-child(odd) {
    background-color: transparent;
  }

  .tile-item:nth-child(odd) .tile-item-link {
    color: var(--color-second);
  }

  /* every forth element starting by one
     plus every forth element starting by four
     to have a checkerboard pattern for 50% tile-item
     */
  .tile-item:nth-child(4n+1),
  .tile-item:nth-child(4n+4) {
    background-color: var(--color-second);
  }

  .tile-item:nth-child(4n+1) .tile-item-link,
  .tile-item:nth-child(4n+4) .tile-item-link {
    color: var(--color-first);
  }
}

@media screen and (min-width: 998px) {
  .tiles-x3 .tile-item {
    flex-basis: 33.33%;
  }

  .tile-item:nth-child(4n+1),
  .tile-item:nth-child(4n+4) {
    background-color: transparent;
  }

  /* checkerboard pattern */
  .tile-item:nth-child(odd) {
    background-color: var(--color-second);
    color: var(--color-first);
  }

  /* checkerboard pattern */
  .tile-item:nth-child(odd) .tile-item-link {
    color: var(--color-first);
  }

  /* checkerboard pattern */
  .tile-item:nth-child(even),
  .tile-item:nth-child(even) .tile-item-link {
    color: var(--color-second);
  }
}
