.tile {
  box-sizing: border-box;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
              -ms-grid-row-align: stretch;
          align-items: stretch;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

.tile.is-ancestor {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
}

.tile.is-ancestor:last-child {
  margin-bottom: -10px;
}

.tile.is-ancestor:not(:last-child) {
  margin-bottom: 10px;
}

.tile.is-child {
  margin: 0 !important;
}

.tile.is-parent {
  padding: 10px;
}

.tile.is-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.tile.is-vertical > .tile.is-child:not(:last-child) {
  margin-bottom: 20px !important;
}

@media screen and (min-width: ${breakpoint_tablet_min}) {
  .tile:not(.is-child):not(.is-desktop) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .tile.is-1:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 8.33333%;
  }
  .tile.is-2:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 16.66667%;
  }
  .tile.is-3:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 25%;
  }
  .tile.is-4:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 33.33333%;
  }
  .tile.is-5:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 41.66667%;
  }
  .tile.is-6:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 50%;
  }
  .tile.is-7:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 58.33333%;
  }
  .tile.is-8:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 66.66667%;
  }
  .tile.is-9:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 75%;
  }
  .tile.is-10:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 83.33333%;
  }
  .tile.is-11:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 91.66667%;
  }
  .tile.is-12:not(.is-desktop) {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 100%;
  }
}

@media screen and (min-width: ${breakpoint_desktop_min}) {
  .tile:not(.is-child) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .tile.is-1 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 8.33333%;
  }
  .tile.is-2 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 16.66667%;
  }
  .tile.is-3 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .tile.is-4 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
  }
  .tile.is-5 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 41.66667%;
  }
  .tile.is-6 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .tile.is-7 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 58.33333%;
  }
  .tile.is-8 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.66667%;
  }
  .tile.is-9 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .tile.is-10 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 83.33333%;
  }
  .tile.is-11 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 91.66667%;
  }
  .tile.is-12 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}
