/* ---CONNECT STYLES ---*/

.connect_section {
    position: relative;
    padding: 15% 5% 10% 5%;
    overflow: hidden;
}

.connect_section .tape_item {
    width: 100vw;
    height: 4vw;
    position: absolute;
    top: 0;
    left: 0;
}

.connect_section .yellow_tape {
    width: 200vw;
    margin-top: 2vw;
    background-image: url("../media/svg/tapetext02.svg");
    background-color: var(--yellow);
    background-repeat: repeat-x;
    background-position: center;
    box-shadow: .5vw .5vw .5vw #10101050;
    animation: tape02 30s alternate infinite;
    z-index: 1;
}

.connect_section .white_tape {
    margin-top: 2vw;
    transform: rotate(-2deg);
    background: var(--white);
}

.connect_section .connect_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
}

.connect_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect_section .media_item {
    position: relative;
    width: 80%;
}

.connect_section .tape01 {
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -40%) rotate(45deg);
    z-index: 3;
}

.connect_section .tape02 {
    width: 20%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0, 50%) rotate(-90deg);
    z-index: 3;
}

.connect_section .sticker {
    width: 20%;
    position: absolute;
    top: 8%;
    right: 3%;
    transform: rotate(-20deg);
    transition: .5s;
    z-index: 3;
}

.connect_section .media_item:hover .sticker {
    transform: rotate(-15deg) scale(1.1);
}

.connect_section .print {
    position: relative;
    z-index: 2;
}

.connect_section .cardboard {
    width: 40%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(45%, -50%);
    transition: .5s;
    z-index: 1;
}

.connect_section .media_item:hover .cardboard {
    transform: translate(45%, -50%) rotate(5deg) scale(.9);
}

.connect_section .bubblewrap {
    width: 15%;
    position: absolute;
    bottom: 20%;
    left: 0;
    transform: translate(-50%, 50%);
    transition: .5s;
    z-index: 1;
}

.connect_section .media_item:hover .bubblewrap {
    transform: translate(-50%, 65%);
}

.connect_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.connect_section .title_box {
    position: relative;
    width: fit-content;
}

.connect_section .title_box h2 {
    position: relative;
    z-index: 1;
}

.connect_section .title_box svg {
    width: 70%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(20%, 10%);
    mix-blend-mode: color-dodge;
}

.connect_section .paragraph_box,
.connect_section .main_btn {
    margin-left: 2vw;
}

.connect_section .paragraph_box p {
    width: 75%;
}

@media (max-width: 996px) {
    .connect_section {
        padding: 35% 10% 10% 10%;
    }
    .connect_section .tape_item {
        height: 15vw;
    }
    .connect_section .connect_box {
        grid-template-columns: 1fr;
        gap: 15vw;
    }
    .connect_section .media_item {
        position: relative;
        width: 80%;
    }
    .connect_section .info_box {
        gap: 5vw;
    }
    .connect_section .title_box svg {
        width: 50%;
        transform: translate(20%, 50%);
    }
    .connect_section .paragraph_box p {
        width: 100%;
    }
}


@keyframes tape02 {
    from {
        transform: rotate(2deg) translate(0, 2vw);
    }
    to {
        transform: rotate(2deg) translate(-100vw, 2vw);
    }
}.connect_section{--yellow:#F9DE79;--white:#F9F6EF;--black:#101010}
.connect_section h2,.connect_section p{margin:0}
.connect_section h2{font-size:2.5vw;line-height:1.2}
.connect_section h2 span{font-size:3.5vw;color:var(--yellow)}
.connect_section p{font-size:1vw;line-height:1.5;color:var(--white)}
.connect_section .main_btn{width:fit-content;color:var(--yellow);font-size:1vw;padding-top:.8vw;border-top:3px solid #F9DE7950}
@media(max-width:996px){.connect_section h2{font-size:7vw}.connect_section h2 span{font-size:9vw}.connect_section p,.connect_section .main_btn{font-size:3.5vw}}
@media(prefers-reduced-motion:reduce){.connect_section .yellow_tape{animation:none}}