.C--post.type--1 {
    display: block;
    white-space: normal;
    &.-has-shadow {
        .post__card {
            @include box-shadow(2px 4px 16px rgba(0,0,0,.28));
        }
    }
    &.-rounded {
        .post__card {
            @include border-radius(6px);
        }
    }
    .post__card {
        display: block;
        position: relative;
        background: #fff;
        overflow: hidden;
    }
    .post__table {
        .cell--left {
            position: relative;
        }
    }
    .post__thumbnail {
        display: block;
        background-position: center center;
    }
    .post__thumbnail-cloning {
        display: block;
        width: 400px;
    }
    .post__detail {
        display: block;
        position: relative;
        padding: 32px;
    }
    .post__title {
        display: block;
        display: -webkit-box;
        margin: 0;
        max-height: 54px;
        overflow: hidden;
        font-size: 2.1rem;
        font-weight: 600;
        color: $text-color;
        line-height: 1.3;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .post__excerpt {
        display: block;
        display: -webkit-box;
        max-height: 81px;
        overflow: hidden;
        font-size: 1.6rem;
        color: $text-color;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .post__separator {
        display: block;
        margin: 16px 0 32px;
        max-width: 32px;
        height: 1px;
        background: #c3c3c3;
    }
    .post__permalink {
        display: inline-block;
        position: relative;
        z-index: 2;
        margin-top: 32px;
        font-size: 0;
        line-height: 0;
        .permalink__label {
            display: block;
            padding: 8px 0;
            font-size: 1.45rem;
            color: $secondary-color;
            line-height: 1.6rem;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.C--post.type--2 {
    display: block;
    white-space: normal;
    .post__card {
        display: block;
        position: relative;
    }
    .post__thumbnail {
        display: block;
        position: relative;
        overflow: hidden;
        .thumbnail__container {
            display: block;
            background: #f5f5f5;
            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
        .thumbnail__ratio {
            display: block;
            padding-top: 100%;
        }
    }
    .post__detail {
        display: block;
        position: relative;
        margin-top: 8px;
    }
    .post__title {
        display: block;
        margin: 0;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.7;
    }
}

.C--post.type--3 {
    display: block;
    white-space: normal;
    &.-rounded {
        .post__card {
            @include border-radius(6px);
        }
    }
    .post__card {
        display: block;
        position: relative;
        overflow: hidden;
    }
    .post__background {
        display: block;
        z-index: 2;
        .background__overlay {
            background: rgba(0,0,0,.6);
        }
        .background__ratio {
            display: block;
            padding-top: 50%;
        }
    }
    .post__clickable {
        z-index: 4;
    }
    .post__content {
        z-index: 3;
        .content__box {
            padding: 16px;
            text-align: center;
        }
    }
    .post__title {
        display: block;
        margin: 0;
        font-size: 2.1rem;
        font-weight: 600;
        color: #fff;
        line-height: 1.55;
    }
}

.C--post.type--4 {
    display: block;
    white-space: normal;
    &.-has-shadow {
        .post__card {
            @include box-shadow(1px 2px 8px rgba(0,0,0,.2));
        }
    }
    &.-rounded {
        .post__card {
            @include border-radius(6px);
        }
    }
    .post__card {
        display: block;
        position: relative;
        overflow: hidden;
        background: #fff;
    }
    .post__thumbnail {
        display: block;
        position: relative;
        overflow: hidden;
        background: #f5f5f5;
        .thumbnail__container {
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
        .thumbnail__ratio {
            display: block;
            padding-top: 50%;
        }
    }
    .post__detail {
        display: block;
        padding: 16px;
        height: 109px;
        overflow: hidden;
    }
    .post__title {
        display: block;
        display: -webkit-box;
        margin: 0;
        max-height: 50px;
        font-size: 1.6rem;
        font-weight: 600;
        color: $text-color;
        line-height: 1.6;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .post__meta {
        display: block;
        display: -webkit-box;
        margin-top: 8px;
        height: 19px;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        .meta__item {
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
            font-size: 1.35rem;
            color: #777;
            line-height: 1.45;
        }
    }
}

.C--post.type--5 {
    display: block;
    white-space: normal;
    &.-has-shadow {
        .post__card {
            @include box-shadow(1px 2px 8px rgba(0,0,0,.2));
        }
    }
    &.-rounded {
        .post__card {
            @include border-radius(6px);
        }
    }
    .post__card {
        display: block;
        position: relative;
        overflow: hidden;
        background: #fff;
    }
    .post__thumbnail {
        display: block;
        position: relative;
        overflow: hidden;
        background: #f5f5f5;
        .thumbnail__container {
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
        .thumbnail__ratio {
            display: block;
            padding-top: 40%;
        }
    }
    .post__detail {
        display: block;
        padding: 16px;
        height: 119px;
        overflow: hidden;
    }
    .post__date {
        display: block;
        margin-right: 16px;
    }
    .post__date-start {
        display: block;
        margin: 0;
        color: $text-color;
    }
    .post__date-start-month {
        display: block;
        margin-top: 2px;
        font-size: 1.4rem;
        font-weight: 600;
        color: #777;
        line-height: 1.5;
        text-transform: uppercase;
    }
    .post__date-start-year {
        display: block;
        margin-top: 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: #777;
        line-height: 1.3;
    }
    .post__title {
        display: block;
        display: -webkit-box;
        margin: 0;
        max-height: 25px;
        font-size: 1.6rem;
        font-weight: 600;
        color: $text-color;
        line-height: 1.6;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
    .post__table {
        > .table-cell {
            &.has-divider {
                padding-left: 22px;
                border-left: 1px solid $border-color;
            }
        }
    }
    .post__meta {
        margin-top: 8px;
        .table-cell {
            &.auto-width {
                width: 24px;
            }
        }
        .meta__icon {
            display: inline-block;
            vertical-align: top;
            margin-right: 8px;
            margin-bottom: 8px;
            .svg {
                display: block;
            }
        }
        .meta__item {
            display: block;
            display: -webkit-box;
            margin-right: 8px;
            margin-bottom: 8px;
            height: 19px;
            overflow: hidden;
            font-size: 1.35rem;
            color: #777;
            line-height: 1.3;
            white-space: nowrap;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
    }
}