@use '../utils' as *;

/*=============================
    13. Minimal Post
===============================*/
.minimal__post {
    &-wrapper {
        --bs-gutter-x: 30px;
        @include flexbox();
        flex-wrap: wrap;
        margin-right: calc(-.5 * var(--bs-gutter-x));
        margin-left: calc(-.5 * var(--bs-gutter-x));
    }
    &-thumb {
        position: relative;
        margin: 0 0 25px;
        & img {
            height: 410px;
            -o-object-fit: cover;
            object-fit: cover;
            -o-object-position: center;
            object-position: center;
            @media #{$xs} {
                width: 100%;
                height: 350px;
            }
        }
    }
    &-item {
        flex: 0 0 auto;
        width: 33.33333333%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        display: none;
        margin: 0 0 55px;
        @media #{$md} {
            width: 50%;
        }
        @media #{$xs} {
            width: 100%;
        }
        &:nth-child(2),
        &:nth-child(11) {
            & .minimal__post-thumb img {
                height: 310px;
            }
        }
        &:nth-child(3),
        &:nth-child(12) {
            & .minimal__post-thumb img {
                height: 410px;
            }
        }
        &:nth-child(4),
        &:nth-child(13) {
            & .minimal__post-thumb img {
                height: 310px;
            }
        }
        &:nth-child(5),
        &:nth-child(14) {
            & .minimal__post-thumb img {
                height: 490px;
                @media #{$xs} {
                    height: 380px;
                }
            }
        }
        &:nth-child(6),
        &:nth-child(15) {
            & .minimal__post-thumb img {
                height: 410px;
            }
        }
        &:nth-child(7),
        &:nth-child(16) {
            & .minimal__post-thumb img {
                height: 690px;
                @media #{$md} {
                    height: 380px;
                }
            }
        }
        &:nth-child(8),
        &:nth-child(17) {
            & .minimal__post-thumb img {
                height: 490px;
            }
        }
        &:nth-child(9),
        &:nth-child(18) {
            & .minimal__post-thumb img {
                height: 410px;
            }
        }
    }
    &-tags {
        @include flexbox();
        flex-wrap: wrap;
        gap: 10px;
        position: absolute;
        left: 30px;
        top: 30px;
        right: 30px;
        z-index: 2;
        & a {
            font-size: 14px;
            text-transform: uppercase;
            font-weight: var(--tg-fw-bold);
            color: var(--tg-theme-secondary);
            display: block;
            line-height: 1;
            background: var(--tg-common-color-white);
            padding: 8px 14px;
            &:hover {
                background: var(--tg-theme-primary);
                color: var(--tg-common-color-white);
            }
        }
    }
    &-content {
        & .tgbanner__content-meta {
            margin: 0 0 10px;
        }
        & .title {
            font-size: 24px;
            line-height: 1.3;
            letter-spacing: -.4px;
            margin: 0 15px 0 0;
            @media #{$lg} {
                font-size: 20px;
            }
            @media #{$sm} {
                font-size: 24px;
            }
        }
    }
    &-more {
        margin-top: 10px;
    }
}