@use '../utils' as *;

/*=============================
    	11. destination
===============================*/

.tg-destination{
    &-item{
        border: 1px solid var(--tg-border-3);
        border-radius: 30px;
    }
    &-thumb{
        overflow: hidden;
        & img{
            border-radius: 30px 30px 0px 0px;
        }
    }
    &-content{
        padding: 0px 30px 26px 30px;
        @media #{$xl,$lg,$md,$sm,$xs} {
            padding: 0px 15px 20px 15px;
        }
    }
    &-meta{
        margin-top: -16px;
        margin-bottom: 27px;
        & a{
            font-weight: 500;
            text-transform: capitalize;
            color: var(--tg-common-white);
            border: 1px solid var(--tg-common-white);
            border-radius: 100px;
            padding: 1px 15px;
            display: inline-block;
            background: var(--tg-theme-primary);
            position: relative;
        }
    }
    &-tag{
        & span{
            font-weight: 500;
            font-size: 14px;
            text-transform: capitalize;
            color: var(--tg-grey-1);
            border: 1px solid var(--tg-border-3);
            border-radius: 6px;
            margin-bottom: 7px;
            padding: 0 9px;
            display: inline-block;
            background: var(--tg-grey-7);
        }
    }
}