.archive-item-first {
    @extend %flex;
    @include flex(100%);

    .enable-boxed {
        @media (min-width: 64.0625em) {
            .post-content {
                .has-sidebar & {
                    padding: 0;
                }
            }
        }
    }

    .column {
        @include flex(100%);
        margin-bottom: rem(40px);

        &.enable-boxed {
            margin-bottom: rem(40px);
        }
    }

    .first-enable-divider {
        .first-content {
            padding-bottom: rem(35px);
            border-bottom: 2px solid $border_color;
        }
    }

    .post {
        position: relative;
        box-shadow: none !important;
        overflow: inherit !important;

        &-excerpt {
            margin-bottom: 0;

            & + .wolfo-button {
                margin-top: rem(20px);
            }
        }
    }
}

.first-layout-1 {
    .first-content {
        .post-image {
            & + .post-content {
                padding-top: rem(18px);
            }
        }
    }
}

.first-layout-2 {
    &:not(.no-thumb) {
        .post {
            padding-bottom: 0;
            border-bottom: none;
            overflow: hidden;
            @include border-radius(5px);

            &:before {
                content: '';
                background: linear-gradient(180deg, rgba($light_scheme, 0) 50%, rgba($highlight_color, 0.7) 100%);
                @include position(absolute, 0, 0, 0, 0);
            }

            &-image {
                margin-right: 0 !important;
            }

            &-content {
                padding-bottom: rem(15px) !important;
                @include position(absolute, null, 0, 0, 0);

                &-wrapper {
                    position: relative;
                    z-index: 2;
                }

                .entry-title {
                    a {
                        color: $light_color;
                    }
                }
            }

            &-date-author {
                color: $light_color;

                > div {
                    color: $light_color;
                }

                .post-author a {
                    color: $light_color;
                }

                .post-meta-date p {
                    color: $light_color;
                }
            }

            &-excerpt, .wolfo-button {
                display: none;
            }
        }
    }

    .post {
        &-content {
            &-wrapper {
                text-align: center;
            }
        }

        &-date-author {
            justify-content: center;
        }

        &-excerpt {
            @include flex(83.33333%);
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.first-layout-3 {
    .post {
        &-date-author {
            margin-bottom: rem(11px);
            & + .post-image {
                margin-top: rem(22px);
            }
        }

        &-image {
            & + .post-content {
                padding-top: rem(20px) !important;
            }
        }

        &-content-wrapper {

            .post-excerpt {
                margin-bottom: 0;

                & + .wolfo-button {
                    margin-top: rem(20px);
                }
            }
        }
    }
}

.first-layout-4 {
    .post {
        @extend %flex-item-center;

        &-image {
            .has-sidebar & {
                @media (min-width: 64.0625em) {
                    padding-right: rem(15px);
                    margin-right: rem(35px);
                    @include flex(50%);

                    & + .post-content {
                        flex: 1;
                        padding-top: 0;
                    }
                }
            }
        }

        .no-sidebar & {
            @media (min-width: 48em) {
                padding-right: rem(15px);
                margin-right: rem(35px);
                @include flex(50%);

                & + .post-content {
                    flex: 1;
                    padding-top: 0;
                }
            }
        }

        &-content {
            @include flex(100%);

            .post-meta-categories {
                margin-bottom: rem(7px);
            }

            .entry-title {
                margin-top: 0;
                margin-bottom: rem(10px);
            }

            .post-date-author {
                margin-bottom: rem(15px);
            }
        }
    }
}

