.ansarel-small-post{
    -webkit-backdrop-filter: blur(var(--ansarel-backdrop-filter-blur, 0)) 
        brightness(var(--ansarel-backdrop-filter-brightness, 100%)) 
        contrast(var(--ansarel-backdrop-filter-contrast, 1)) 
        grayscale(var(--ansarel-backdrop-filter-grayscale, 0)) 
        invert(var(--ansarel-backdrop-filter-invert, 0)) 
        opacity(var(--ansarel-backdrop-filter-opacity, 1)) 
        sepia(var(--ansarel-backdrop-filter-sepia, 0)) 
        saturate(var(--ansarel-backdrop-filter-saturate, 1)) 
        hue-rotate(var(--ansarel-backdrop-filter-hue-rotate, 0deg));
    backdrop-filter:  blur(var(--ansarel-backdrop-filter-blur, 0)) 
        brightness(var(--ansarel-backdrop-filter-brightness, 100%)) 
        contrast(var(--ansarel-backdrop-filter-contrast, 1)) 
        grayscale(var(--ansarel-backdrop-filter-grayscale, 0)) 
        invert(var(--ansarel-backdrop-filter-invert, 0)) 
        opacity(var(--ansarel-backdrop-filter-opacity, 1)) 
        sepia(var(--ansarel-backdrop-filter-sepia, 0)) 
        saturate(var(--ansarel-backdrop-filter-saturate, 1)) 
        hue-rotate(var(--ansarel-backdrop-filter-hue-rotate, 0deg));
}
.ansarel-small-post {
    display: flex;
    gap: 20px;
    align-items: center; 
    .ansarel-img-wraper{
      width: 100px;
      height: 100px;
      min-height: 50px;
      border-radius: 12px;
      flex: 0 0 auto;
      overflow: hidden;
      position: relative;
      img{
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
    .ansarel-inner{
        width: 100%;
    }
    .ansarel-title{
        font-size: 20px;
    }
    &.layout-two{
        width: 100%;
        height: 250px;
        max-height: 100%;
        position: relative;
        .ansarel-img-wraper{
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            width: 100%;
            height: 100%;;
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: 0.3s;
            }
            &::before {
                content: "";
                inset: 0;
                background-color: rgba(103, 108, 237, 0.4);
                z-index: 1;
                position: absolute;
            }
        }
        .ansarel-inner { 
            padding: 20px;
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
            z-index: 1;
            position: absolute;
            inset: 0;
            top: 0;
            bottom: 0;
            left: 0;
            .ansarel-category{
                width: unset;       
            }
    }   }
}
.ansarel-small-post{
    &.layout-three{
        width: 100%;
        position: relative;
        flex-direction: column;
        .ansarel-img-wraper{
            width: 100%;
            height: 100px;
            img{
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}

// grid css
.ansarel-featured-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 0;

    &.layout-vertical {
        .ansarel-post-left {
            min-width: 0;
        }
        .ansarel-post-right {
            flex: 1 1 0;
            min-width: 0;
            display: grid;
            gap: 1.2rem;
            align-content: start;
        }
    }

    &.layout-horizontal {
        flex-direction: column;

        .ansarel-post-left {
            width: 100%;
        }
        .ansarel-post-right {
            width: 100%;
            display: grid;
            gap: 1.2rem;
            align-content: start;
        }
    }
}

@media (max-width: 1024px) {
    .ansarel-featured-posts {
        &.layout-vertical {
            .ansarel-post-left {
                flex: 0 0 100%;
            }
            .ansarel-post-right {
                flex: 0 0 100%;
                grid-template-columns: repeat(2, 1fr);
            }
        }
        &.layout-horizontal {
            .ansarel-post-right {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

@media (max-width: 767px) {
    .ansarel-featured-posts {
        &.layout-vertical {
            .ansarel-post-right {
                grid-template-columns: repeat(1, 1fr);
            }
        }
        &.layout-horizontal {
            .ansarel-post-right {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }
}