/* ======================================================
   Architecture Website Framework
   Helpers CSS
======================================================*/


/*==========================================
OVERLAY
==========================================*/

.overlay{

    position:absolute;

    inset:0;

}


/*==========================================
GRADIENTS
==========================================*/

.gradient-dark{

    background:linear-gradient(
    rgba(0,0,0,.2),
    rgba(0,0,0,.6));

}

.gradient-light{

    background:linear-gradient(
    rgba(255,255,255,.1),
    rgba(255,255,255,.9));

}


/*==========================================
BADGE
==========================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    background:var(--accent-light);

    color:var(--secondary);

    border-radius:50px;

    font-size:13px;

    font-weight:700;

}


/*==========================================
DIVIDER
==========================================*/

.divider{

    width:80px;

    height:2px;

    background:var(--secondary);

}


/*==========================================
ASPECT RATIOS
==========================================*/

.ratio-1x1{

    aspect-ratio:1;

}

.ratio-4x3{

    aspect-ratio:4/3;

}

.ratio-16x9{

    aspect-ratio:16/9;

}


/*==========================================
SKELETON
==========================================*/

.skeleton{

    background:linear-gradient(
        90deg,
        #f2f2f2 25%,
        #fafafa 37%,
        #f2f2f2 63%);

    background-size:400% 100%;

    animation:skeleton-loading 1.4s infinite;

}

@keyframes skeleton-loading{

    0%{

        background-position:100% 50%;

    }

    100%{

        background-position:0 50%;

    }

}