/* Apenas adiciona os personagens.
   Nenhum estilo da área original do Instagram é alterado. */

.instagram-characters-only {
    position: relative !important;
    overflow: visible !important;
}


/* PERSONAGENS */

.instagram-character {
    position: absolute;

    bottom: -5px;

    width: auto;
    height: 500px;

    object-fit: contain;

    z-index: 20;

    pointer-events: none;
    user-select: none;

    filter:
        drop-shadow(
            0 22px 32px
            rgba(0,0,0,.70)
        );
}


/* LUARA */
.instagram-character-luara {
    left: -55px;
}


/* BRUNO */
.instagram-character-bruno {
    right: -55px;
}


/* Notebook */

@media (max-width: 1250px) {

    .instagram-character {
        height: 430px;
    }

    .instagram-character-luara {
        left: -35px;
    }

    .instagram-character-bruno {
        right: -35px;
    }
}


/* Tablet */

@media (max-width: 900px) {

    .instagram-character {
        height: 350px;
    }

    .instagram-character-luara {
        left: -70px;
    }

    .instagram-character-bruno {
        right: -70px;
    }
}


/* No celular preservamos o layout atual */

@media (max-width: 650px) {

    .instagram-character {
        display: none;
    }
}


/* Ajuste final: personagens mais para dentro da página */

.instagram-character-luara {
    left: clamp(55px, 7vw, 120px) !important;
}

.instagram-character-bruno {
    right: clamp(55px, 7vw, 120px) !important;
}


/* notebook */
@media (max-width: 1250px) {

    .instagram-character-luara {
        left: 45px !important;
    }

    .instagram-character-bruno {
        right: 45px !important;
    }
}


/* tablet */
@media (max-width: 900px) {

    .instagram-character-luara {
        left: 20px !important;
    }

    .instagram-character-bruno {
        right: 20px !important;
    }
}