/* column image item
   ============================ */

.column-image .wrapper {
    padding-bottom: 40px;
    padding-top: 39px;
}
.column-image .wrapper h2,
.column-image .wrapper .description {
    margin-bottom: 32px;
}

/* tiles */
.column-image .tile-wrapper {
    margin: 0 -64px;
}
.column-image .tiles {
    border-collapse: separate;
    border-spacing: 32px 0;
    display: table;
    margin-bottom: 40px;
    table-layout: fixed;
    width: 100%;
}
.column-image .tiles .tile {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
.column-image .tiles .inner {
    background-color: #f7f7f7;
    height: 100%;
    position: relative;
}
ul.equal-height li:nth-child(3n+0)::after {
    clear: both;
    content: "";
    display: table;
    height: 1px;
    width: 100%;
}

/* image */
.column-image .tiles .tile .image {
    max-height: 200px;
    overflow: hidden;
}
.column-image .tiles .tile .image,
.column-image .tiles .tile .image > img {
    max-width: none;
    width: 100%;
}

/* text */
.column-image .tiles .tile .text {
    padding: 20px 35px 40px;
}
.column-image .tiles .tile .text h3 {
    color: #21016b;
    margin-bottom: 10px;
}
.column-image .tiles .tile .text .description {
    line-height: 2.4rem;
    padding-bottom: 70px;
}
.column-image .tiles .tile .text .cta {
    bottom: 40px;
    left: 35px;
    position: absolute;
}

/* ie10 & ie9 */
.ie10 .column-image .tile-wrapper,
.ie9 .column-image .tile-wrapper {
    margin: 0;
}
.ie10 .column-image .tiles,
.ie9 .column-image .tiles {
    border-collapse: collapse;
    margin-bottom: 40px;
    table-layout: auto;
    width: 100%;
}
.ie10 .column-image .tiles .tile,
.ie9 .column-image .tiles .tile {
    width: auto;
    padding-right: 15px;
}
.ie10 .column-image .tiles .tile:nth-child(n+2),
.ie9 .column-image .tiles .tile:nth-child(n+2) {
    padding-left: 15px;
}
.ie10 .column-image .tiles .tile:last-child,
.ie9 .column-image .tiles .tile:last-child {
    padding-right: 0;
}

/* responsive
   ============================ */

@media screen and (max-width: 880px) {

    /* tiles */
    .column-image .tile-wrapper {
        margin: 0 -50px;
    }
    .column-image .tiles {
        border-spacing: 25px 0;
    }

    /* text */
    .column-image .tiles .tile .text {
        padding-left: 25px;
        padding-right: 25px;
    }
    .column-image .tiles .tile .text h3 {
        font-size: 3rem;
        line-height: 3.6rem;
    }
    .column-image .tiles .tile .text .cta {
        left: 25px;
    }
}

@media screen and (max-width: 736px) {

    .column-image .wrapper h2 {
        margin-bottom: 31px;
    }

    /* tiles */
    .column-image .tile-wrapper {
        margin: 0;
    }
    .column-image .tiles,
    .column-image .tiles .tile {
        border-spacing: 0;
        display: block;
    }
    .column-image .tiles .tile {
        margin-top: 20px;
    }
    .column-image .tiles .tile:first-child {
        margin-top: 0;
    }

    /* image */
    .column-image .tiles .tile .image {
        max-height: 180px;
    }

    /* text */
    .column-image .tiles .tile .text {
        margin-bottom: 0;
        padding: 15px 22px 20px;
    }
    .column-image .tiles .tile .text h3 {
        font-size: 2.6rem;
        line-height: 3rem;
        margin-bottom: 13px;
    }
    .column-image .tiles .tile .text .description {
        margin-bottom: 17px;
        padding-bottom: 0;
    }
    .column-image .tiles .tile .text .cta {
        bottom: 0;
        left: 0;
        position: relative;
    }
}
