.la-deco-host {
    position: relative;
    isolation: isolate;
}

.la-deco {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    display: block !important;
    background-repeat: no-repeat;
    background-size: contain;
    --deco-min: 100px;
    --deco-ideal: 25vw;
    --deco-shift-x: 0px;
    --deco-shift-y: 0px;
    --deco-rotate: 0deg;
    --deco-scale-x: 1;
    --deco-scale-y: 1;
    --deco-offset: 0px;
    translate: var(--deco-shift-x) var(--deco-shift-y) !important;
    rotate: var(--deco-rotate) !important;
    scale: var(--deco-scale-x) var(--deco-scale-y) !important;
    transform-origin: center center;
    transition: opacity 0.3s ease;
}

.la-deco--h-16 { height: 16px !important; --deco-min: 16px; }
.la-deco--h-24 { height: 24px !important; --deco-min: 24px; }
.la-deco--h-32 { height: 32px !important; --deco-min: 32px; }
.la-deco--h-48 { height: 48px !important; --deco-min: 48px; }
.la-deco--h-64 { height: 64px !important; --deco-min: 64px; }
.la-deco--h-100 { height: clamp(var(--deco-min), var(--deco-ideal), 100px) !important; }
.la-deco--h-150 { height: clamp(var(--deco-min), var(--deco-ideal), 150px) !important; }
.la-deco--h-160 { height: clamp(var(--deco-min), var(--deco-ideal), 160px) !important; }
.la-deco--h-180 { height: clamp(var(--deco-min), var(--deco-ideal), 180px) !important; }
.la-deco--h-200 { height: clamp(var(--deco-min), var(--deco-ideal), 200px) !important; }
.la-deco--h-220 { height: clamp(var(--deco-min), var(--deco-ideal), 220px) !important; }
.la-deco--h-240 { height: clamp(var(--deco-min), var(--deco-ideal), 240px) !important; }
.la-deco--h-300 { height: clamp(var(--deco-min), var(--deco-ideal), 300px) !important; }
.la-deco--h-370 { height: clamp(var(--deco-min), var(--deco-ideal), 370px) !important; }

.la-deco--w-48 { width: 48px !important; }
.la-deco--w-64 { width: 64px !important; }
.la-deco--w-96 { width: 96px !important; }
.la-deco--w-100 { width: clamp(var(--deco-min), var(--deco-ideal), 100px) !important; }
.la-deco--w-160 { width: clamp(var(--deco-min), var(--deco-ideal), 160px) !important; }
.la-deco--w-180 { width: clamp(var(--deco-min), var(--deco-ideal), 180px) !important; }
.la-deco--w-200 { width: clamp(var(--deco-min), var(--deco-ideal), 200px) !important; }
.la-deco--w-220 { width: clamp(var(--deco-min), var(--deco-ideal), 220px) !important; }
.la-deco--w-240 { width: clamp(var(--deco-min), var(--deco-ideal), 240px) !important; }
.la-deco--w-300 { width: clamp(var(--deco-min), var(--deco-ideal), 300px) !important; }
.la-deco--w-320 { width: clamp(var(--deco-min), var(--deco-ideal), 320px) !important; }
.la-deco--w-370 { width: clamp(var(--deco-min), var(--deco-ideal), 370px) !important; }

.la-deco--repeat-none { background-repeat: no-repeat !important; }
.la-deco--repeat-x { background-repeat: repeat-x !important; background-size: auto 100% !important; }
.la-deco--repeat-y { background-repeat: repeat-y !important; background-size: 100% auto !important; }
.la-deco--repeat { background-repeat: repeat !important; background-size: auto !important; }

.la-deco--edge-x { width: 100% !important; left: 0; right: 0; }
.la-deco--edge-y { height: 100% !important; top: 0; bottom: 0; }

.la-deco--tl { top: 0; left: 0; background-position: left top; }
.la-deco--tr { top: 0; right: 0; background-position: right top; }
.la-deco--bl { bottom: 0; left: 0; background-position: left bottom; }
.la-deco--br { bottom: 0; right: 0; background-position: right bottom; }

.la-deco--top { top: 0; left: 50%; translate: calc(-50% + var(--deco-shift-x)) var(--deco-shift-y) !important; }
.la-deco--bottom { bottom: 0; left: 50%; translate: calc(-50% + var(--deco-shift-x)) var(--deco-shift-y) !important; }
.la-deco--left { left: 0; top: 50%; translate: var(--deco-shift-x) calc(-50% + var(--deco-shift-y)) !important; }
.la-deco--right { right: 0; top: 50%; translate: var(--deco-shift-x) calc(-50% + var(--deco-shift-y)) !important; }

.la-deco--center-x { left: 50%; translate: calc(-50% + var(--deco-shift-x)) var(--deco-shift-y) !important; }
.la-deco--center-y { top: 50%; translate: var(--deco-shift-x) calc(-50% + var(--deco-shift-y)) !important; }
.la-deco--center { top: 50%; left: 50%; translate: calc(-50% + var(--deco-shift-x)) calc(-50% + var(--deco-shift-y)) !important; }

.la-deco--edge, .la-deco--inside { --deco-dir: 1; }
.la-deco--outside { --deco-dir: -1; }

.la-deco--inside.la-deco--tl, .la-deco--edge.la-deco--tl { top: var(--deco-offset); left: var(--deco-offset); }
.la-deco--inside.la-deco--tr, .la-deco--edge.la-deco--tr { top: var(--deco-offset); right: var(--deco-offset); }
.la-deco--inside.la-deco--bl, .la-deco--edge.la-deco--bl { bottom: var(--deco-offset); left: var(--deco-offset); }
.la-deco--inside.la-deco--br, .la-deco--edge.la-deco--br { bottom: var(--deco-offset); right: var(--deco-offset); }

.la-deco--inside.la-deco--top, .la-deco--edge.la-deco--top { top: var(--deco-offset); }
.la-deco--inside.la-deco--bottom, .la-deco--edge.la-deco--bottom { bottom: var(--deco-offset); }
.la-deco--inside.la-deco--left, .la-deco--edge.la-deco--left { left: var(--deco-offset); }
.la-deco--inside.la-deco--right, .la-deco--edge.la-deco--right { right: var(--deco-offset); }

.la-deco--outside.la-deco--tl { top: calc(var(--deco-offset) * -1); left: calc(var(--deco-offset) * -1); }
.la-deco--outside.la-deco--tr { top: calc(var(--deco-offset) * -1); right: calc(var(--deco-offset) * -1); }
.la-deco--outside.la-deco--bl { bottom: calc(var(--deco-offset) * -1); left: calc(var(--deco-offset) * -1); }
.la-deco--outside.la-deco--br { bottom: calc(var(--deco-offset) * -1); right: calc(var(--deco-offset) * -1); }

.la-deco--outside.la-deco--top { top: calc(var(--deco-offset) * -1); }
.la-deco--outside.la-deco--bottom { bottom: calc(var(--deco-offset) * -1); }
.la-deco--outside.la-deco--left { left: calc(var(--deco-offset) * -1); }
.la-deco--outside.la-deco--right { right: calc(var(--deco-offset) * -1); }

.la-deco--soft { opacity: 0.35 !important; }

.la-motif--condor { background-image: url("../images/motifs/condor.png"); }
.la-motif--dualidad { background-image: url("../images/motifs/dualidad.png"); }
.la-motif--flor-de-cantuta { background-image: url("../images/motifs/flor_de_cantuta.png"); }
.la-motif--formas-geometricas { background-image: url("../images/motifs/formas_geometricas.png"); }
.la-motif--formas { background-image: url("../images/motifs/formas.png"); }
.la-motif--mix-condor-flor { background-image: url("../images/motifs/mix_condor_flor.png"); }
.la-motif--ondas { background-image: url("../images/motifs/ondas.png"); }
.la-motif--puma { background-image: url("../images/motifs/puma.png"); }
.la-motif--trilogia-andina { background-image: url("../images/motifs/trilogia-andina.png"); }

@media (max-width: 768px) {
    .la-deco {
        --deco-min: 60px;
        max-width: 45vw;
    }
}