.quote-bubble {
    margin-left: clamp(-11em, calc(-39vw + 25em), 1.5em);
}

.img1 {
    position: relative;
    float: right;
    z-index: 1;
    margin: -0.1em -1.25em -5em;
    width: 42.4%;
}

.box1 {
    width: 55%;
    padding-right: 5em;
}

.img2 {
    position: absolute;
    top: 4.5em;
    right: -8.25em;
    width: 53.3%;
}

.box2 {
    box-sizing: border-box;
    width: 74%;
    margin-left: 26%;
}

.img3 {
    position: absolute;
    top: 0;
    right: 83%;
    width: min(calc(47vw - 13.75em), 22em);
}

.img4 {
    position: absolute;
    top: max(calc(17.7em - 11vw), 10.5em);
    width: min(calc(51vw - 16em), 17.39em);
    right: 83%;
}

.img5 {
    position: absolute;
    top: 18em;
    width: min(calc(50.2vw - 19em), 19em);
    left: 91%;
}

.content1 {
    margin-left: 27.9%;
    width: 72.1%;
}

.img6 {
    position: absolute;
    top: 0;
    right: 102%;
    width: min(calc(49.1vw - 11em), 24.2em);
}

.img7 {
    position: absolute;
    top: 17.25em;
    right: 102%;
}

.box3 {
    width: 67.3%;
}

.img8 {
    height: 1em;
    width: 5.48em;
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: middle;
}

.img8 img {
    width: 100%;
    margin-top: -1.8em;
}

.img9 {
    position: absolute;
    bottom: -1.3em;
    left: 94%;
    width: min(calc(49vw - 9em), 16.7em);
}

.img10 {
    position: absolute;
    top: 9.5em;
    right: 100.5%;
    width: min(calc(38.9vw - 15em), 14.86em);
}

.img11 {
    position: absolute;
    bottom: 6em;
    left: 91.5%;
    width: min(calc(48.7vw - 18em), 14em);
}

.box4 {
    width: 65.5%;
    margin-left: 34.5%;
}

.img12 {
    position: absolute;
    bottom: -3em;
    right: 10%;
    width: 7.9em;
}

.video1 {
    float: right;
    margin: -2em -1em 1em 0.3em;
    font-size: 0.74em;
}

.box5 {
    box-sizing: border-box;
    min-width: calc(100% - 11em);
    max-width: calc(100% - 11em);
    margin-bottom: 0;
}

.flex1 {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
    width: 100%;
}

.bubble1 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.19em;
    padding: 0 0.9em;
    font-size: 1.45em;
    font-weight: 900;
    color: rgb(255, 255, 255);
    background-color: var(--wic-violet);
    border-radius: 50%;
    width: min-content;
    aspect-ratio: 1;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.faded-bg-box.box6 {
    box-sizing: border-box;
    width: 69%;
    margin-left: 31%;
}

.img13 {
    position: absolute;
    top: max(calc(10.7em - 6vw), 5em);
    left: min(calc(17vw + 16em), 102%);
    width: min(calc(33.3vw - 10em), 16.6em);
}

.img14 {
    position: absolute;
    top: 19.5em;
    right: 90%;
    width: min(calc(48.7vw - 6.1em), 27.14em);
}

.box7 {
    max-width: 62.5%;
    min-width: 62.5%;
    margin-bottom: 0;
}

.flex2 {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}

.img15 {
    margin-left: min(2.75vw, 2em);
}

.img15 img {
    width: min(calc(27vw - 2em), 16.53em);
}

.box8 {
    width: 61%;
    margin-left: 39%;
}

.box9 {
    width: 64%;
}

.img16 {
    position: absolute;
    top: -8em;
    right: 84%;
}

.img17 {
    position: absolute;
    bottom: -1.5em;
    left: 93%;
}

/* SPANISH VERSION */

.spanish :is(p, li):not(.large, .head) {
    font-size: 1.3rem;
}

.spanish .quote-bubble p {
    font-size: clamp(14px, calc(0.8vw + 0.5em), 1.3rem);
}

.spanish .quote-bubble blockquote {
    font-size: clamp(1.2em, calc(1.35vw + 0.5em), 1.65em);
}

.spanish .img1 {
    margin-left: 0.5em;
}

.spanish :is(.img4,.img5) {
    font-size: 1.158em;
}

.text1-es {
    width: 95%;
}

.text2-es {
    width: 92%;
}

.spanish .img8 {
    width: 5.3em;
}

.spanish .img12 {
    bottom: -3.5em;
    right: unset;
    left: 73%;
}

@media (max-width: 1500px) {
    .img10 {
        position: static;
        float: left;
        width: 35%;
        margin-right: 1.5em;
        margin-top: 0.75em;
    }
    
    .text1 {
        width: 90%;
    }
}

@media (max-width: 1400px) {
    .img5 {
        position: static;
        float: right;
        width: 35%;
        margin-left: 1em;
    }
    
    .box8 {
        box-sizing: border-box;
        margin-left: 23%;
        width: 77%;
    }
    
    .text2-es {
        width: 100%;
    }
}

@media (max-width: 1300px) {
    .img11 {
        position: static;
        float: right;
        width: 30%;
        margin-left: 0.75em;
    }
    
    .text1 {
        width: 100%;
    }
    
    .box4 {
        box-sizing: border-box;
        width: 30em;
        margin-left: calc(100% - 30em);
    }
    
    .img13 {
        position: relative;
        left: 2.5em;
        top: 0;
        float: right;
        width: 35%;
        margin-left: -2em;
    }
    
    .img16 {
        position: static;
        float: left;
        width: 23%;
        margin-right: 1em;
    }
    
    .img17 {
        position: static;
        float: right;
        width: 30%;
    }
    
    .box9 {
        box-sizing: border-box;
        width: min(calc(100% - 1.5em), 38em);
    }
}

@media (max-width: 1210px) {
    .img3 {
        right: 79%;
        width: min(calc(49vw - 13.75em), 22em);
    }
    
    .img4 {
        position: static;
        float: right;
        width: 35%;
        margin-left: 1em;
    }
}

@media (max-width: 1140px) {
    .img1 {
        margin-right: 0;
        width: 38%;
    }
    
    .img3, .img4, .img5, .img6, .img16, .img17 {
        position: static;
    }
    
    .box2, .faded-bg-box[data-num="3"] {
        box-sizing: border-box;
        width: calc(100% - 3em);
    }
    
    .img3 {
        display: block;
        width: min(554px, 90%);
        margin: 0 auto;
    }
    
    .img6 {
        display: block;
        margin: 0 auto 0.5em;
        width: min(584px, 70%);
    }
    
    .img7 {
        top: 31.3em;
        right: 72%;
        width: calc(35vw - 4em);
    }
    
    .content1 {
        margin-left: 0;
        width: 100%;
    }
    
    .content1 .faded-bg-box {
        box-sizing: border-box;
        margin-left: 27.9%;
        width: 72.1%;
    }
    
    .img9 {
        width: min(calc(48vw - 9em), 16.7em);
    }
    
    .img13 {
        left: 1.25em;
        margin-left: -0.5em;
    }
    
    .img15 img {
        width: 100%;
    }
    
    .box8 {
        box-sizing: border-box;
        width: calc(100% - 1.5em);
        margin-left: 0;
    }
}

@media (max-width: 1100px) {
    .quote-bubble {
        left: 0;
    }
}

@media (max-width: 1000px) {
    .spanish .img8 {
        height: auto;
        float: right;
    }
}

@media (max-width: 950px) {
    .img8 {
        height: auto;
        float: right;
    }
    
    .img8 img {
        margin-top: 0;
    }
    
    .text1-es {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .img2 {
        top: 8.5em;
        right: -6.3em;
        width: 45%;
    }
    
    .video1 {
        float: none;
        display: flex;
        margin: 0 0 1em 0;
        justify-content: center;
    }
}

@media (max-width: 750px) {
    .img2 {
        position: static;
        display: block;
        margin: 0 auto;
        width: min(407px, 80%);
    }
    
    .box1 {
        box-sizing: border-box;
        width: calc(100% - 3em);
        padding-right: 1.5em;
    }
    
    .img4, .img5 {
        float: none;
        margin: 0.75em auto;
        width: 80%;
    }
    
    .img7 {
        display: block;
        position: static;
        margin: 0 auto 0.5em;
        width: min(328px, 80%);
    }
    
    .content1 .faded-bg-box,
    .box3,
    .box4 {
        box-sizing: border-box;
        margin-left: 0;
        width: 100%;
    }
    
    .img9 {
        display: block;
        position: static;
        float: right;
        width: 35%;
        margin-top: -1em;
        margin-left: 0.5em;
    }
    
    .img13 {
        display: block;
        position: static;
        float: none;
        margin: 0.5em auto;
        width: min(100%, 15em);
    }
    
    .img14 {
        display: block;
        position: static;
        margin: 0.5em auto;
        width: min(100%, 21em);
    }
    
    .faded-bg-box.box6 {
        width: calc(100% - 1.5em);
        margin-left: 1.5em;
    }
    
    .flex2 {
        flex-direction: column;
        margin-bottom: 0.5em;
    }
    
    .box7 {
        width: calc(100% - 1.5em);
        max-width: unset;
        min-width: unset;
        margin-bottom: 1em;
    }
    
    .img15 {
        width: min(100%, 15em);
    }
}

@media (max-width: 720px) {
    .quote-bubble {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .img1, 
    .spanish .img1 {
        display: block;
        position: relative;
        margin: 0 auto 0.75em;
        float: none;
    }
    
    .img10, .img11 {
        display: block;
        float: none;
        margin: 0.75em auto;
        width: min(329px, 80%);
    }
    
    .img12 {
        position: static;
        float: right;
        margin-left: 0.5em;
        margin-top: 0.5em;
    }
    
    .flex1 {
        flex-direction: column-reverse;
    }
    
    .bubble1 {
        margin-bottom: 1em;
    }
    
    .box5 {
        min-width: unset;
        max-width: 100%;
    }
    
    .img16,
    .img17 {
        display: block;
        float: none;
        margin: 0.25em auto;
    }
    
    .img16 {
        width: min(100%, 8em);
    }
    
    .img17 {
        width: min(100%, 10em);
    }
}

@media (max-width: 430px) {
    .faded-bg-box[data-num="3"] {
        width: 100%;
    }
    
    .faded-bg-box.box6 {
        margin-bottom: 0;
        margin-left: 0;
        width: 100%;
    }
    
    .img9 {
        float: none;
        margin: -0.75em auto 0.5em;
        width: 70%;
    }
    
    .img12 {
        display: block;
        float: none;
        margin: 0.5em auto 0;
        width: 45%;
    }
}

@media (max-width: 350px) {
    .child-page .medium {
        font-size: 1.2rem;
    }
}
