/* =====================================================
   EDUCATION FRAME COMPONENT
===================================================== */

.frame.frame{

    position:absolute;

    width:var(--frame-size);

    height:var(--frame-size);

    display:block;

    background-image:url("../images/rama.svg");

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    pointer-events:none;

    border-radius:0 !important;

    overflow:visible !important;

    transform-origin:center;

    transition:opacity .25s ease;

    z-index:3;

}

.frame.frame::before,
.frame.frame::after{

    content:none !important;

    display:none !important;

}

.frame.frame--tl{

    top:var(--frame-inset-y);

    left:var(--frame-inset-x);

    transform:rotate(0deg);

}

.frame.frame--tr{

    top:var(--frame-inset-y);

    right:var(--frame-inset-x);

    transform:rotate(90deg);

}

.frame.frame--br{

    right:var(--frame-inset-x);

    bottom:var(--frame-inset-y);

    transform:rotate(180deg);

}

.frame.frame--bl{

    bottom:var(--frame-inset-y);

    left:var(--frame-inset-x);

    transform:rotate(270deg);

}

/* Preserve the section-specific frame colors used before the SVG component. */
.what-is__image-frame .frame,
.inspirations__image .frame,
.about-story__image .frame{

    filter:brightness(0) invert(1);

}

.features__card .frame{

    filter:none;

}