/* ==========================================================================
   Tiles extends and mixins
   ========================================================================== */

/* ==========================================================================
   Tiles
   ========================================================================== */

.tile {
    @include xy-cell(100%, false, $grid-margin-gutters, padding);
    position: relative;

    @include breakpoint (medium) {
        @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);
    }

    @include breakpoint (large) {
        @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);
    }

    @include breakpoint (xlarge) {
        @include xy-cell(20%,  false, $grid-margin-gutters, padding);
    }

    &__content {
        padding: $global-padding;
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
    }

    &__body {
        color: $white;
    }

    &s  {
        list-style-type: none;
        margin: 0 0 $global-margin*5;
        @include xy-grid;
    }
}