// responsive: multi-column
html.no-flexbox .tile-table {
    display: table;
    table-layout: fixed;

    border-collapse: separate;
    border-spacing: 2em 4em;

    // this is not nice but I could not find another to have same-width tiles
    // IE9 will ignore the width if calc(...) is used. So only the prefixed versions here.
    width: 100%;
    width: -webkit-calc(100% + 4em);
    width: -moz-calc(100% + 4em);
    margin-left: -2em;

    .tile-row {
        display: table-row;

        .tile {
            display: table-cell;
            position: relative;
        }
    }
}
html.flexbox .tile-table {
    width: calc(100% + 2em);
    margin-left: -1em;

    .tile-row {
        @include display(flex);
        @include justify-content(space-between);
        margin: 4em 0;
    }
    .tile {
        @include flex(1);
        position: relative;
        margin: 0 1em;

        // leave space for button
        padding-bottom: 3em;
    }
    .tile-button {
        position: absolute;
        bottom: 0;
    }
}

// responsive: single column, not yet active
.tile-table-smallscreen {
    margin: 1.5em 0;

    .tile {
        display: block;
        margin: 4em 0;
    }
}

// reset link inheritance
a.tile {
    color: inherit;
    text-decoration: inherit;
    cursor: pointer;

    h3 {
        font-size: 150%;
    }

    &:hover {
        color: inherit;
        text-decoration: inherit;
        .tile-button:last-child {
            @include button-background($primary-color);
        }
    }
}

.tile-image {
    width: 100%;
    border-bottom: 2px solid $primary-color;
    vertical-align: bottom;
}
