.quiz-section {
    position: relative;
    margin-top: 3.513909224011713vw;
}
.mobile-only {
    display: none;
}

/* quiz hero */
.quiz-hero {
    position: relative;
    background: url(/assets/img/quiz/quiz_hero_bg.png) no-repeat;
    background-size: cover;
    background-position: 100% 50%;
    overflow: hidden;
    padding: 2.928257687vw 0;
}
.quiz-hero .quiz-hero__wrapper {
    display: flex;
    flex-direction: column;
    gap: 8.199121523vw;
    max-width: 51.68374817vw;
    color: #fff;
    margin: 0 auto;
}
.quiz-hero .quiz-hero__content {
    display: flex;
    flex-direction: column;
    gap: 2.342606149vw;
}
.quiz-hero .quiz-hero__row {
    display: flex;
    flex-direction: column;
    gap: 1.756954612vw;
    text-align: center;
}
.quiz-hero .quiz-hero__title {
    font-size: 2.342606149vw;
    line-height: 125%;
}
.quiz-hero .quiz-hero__title span {
    color: #FF02A7;
}
.quiz-hero .quiz-hero__desc {
    font-size: 1.02489019vw;
    line-height: 135%;
    font-weight: 400;
    margin: 0;
}
.quiz-hero .quiz-hero__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.171303075vw;
}
.quiz-hero .quiz-hero__buttons .quiz-hero__button {
    width: 100%;
    height: auto;
    font-size: 0.878477306vw;
    line-height: 135%;
    font-weight: 700;
    color: var(--black);
    text-transform: uppercase;
    border-radius: 1.171303075vw;
    padding: 1.171303075vw;
}
.quiz-hero .quiz-hero__buttons .quiz-hero__button u {
    background-color: var(--gray2);
}
.quiz-hero .quiz-hero__buttons .quiz-hero__button.quiz-hero__button-test u {
    background-color: #00FF72;
}
.quiz-hero .quiz-hero__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.756954612vw;
}
.quiz-hero .quiz-hero__labels .quiz-hero__label {
    font-size: 0.8052708638vw;
    line-height: 135%;
    font-weight: 700;
    color: var(--gray4);
}
.quiz-hero .quiz-hero__bottom-title {
    font-size: 1.464128843vw;
    line-height: 135%;
    margin: 0;
}
.quiz-hero .quiz-hero__bottom-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.171303075vw;
}
.quiz-hero .quiz-hero__bottom-icons .quiz-hero__bottom-icon {
    display: flex;
    align-items: center;
    gap: 1.171303075vw;
}
.quiz-hero .quiz-hero__bottom-icons .quiz-hero__bottom-icon img {
    width: 2.928257687vw;
    height: 2.928257687vw;
    object-fit: contain;
}
.quiz-hero .quiz-hero__bottom-icons .quiz-hero__bottom-icon .quiz-hero__bottom-icon-title {
    font-size: 1.02489019vw;
    line-height: 135%;
    font-weight: 400;
    margin: 0;
}
/* quiz hero jars */
.quiz-hero .quiz-hero__jar {
    position: absolute;
    height: auto;
    transition: .2s linear;
}
.quiz-hero .quiz-hero__jar img {
    width: 11.71303075vw;
}
.quiz-hero #jar-1 img {
    width: 14.78770132vw;
}
.quiz-hero #jar-1 {
    top: -8.052708638vw;
    left: 4.39238653vw;
    transform: rotate(-9deg);
}
.quiz-hero #jar-2 {
    bottom: 12.44509517vw;
    left: -0.439238653vw;
    transform: rotate(-30deg);
}
.quiz-hero #jar-3 {
    bottom: -4.245973646vw;
    left: 6.734992679vw;
    transform: rotate(29deg);
}
.quiz-hero #jar-4 {
    bottom: -3.36749634vw;
    right: 8.638360176vw;
    transform: rotate(-29deg);
}
.quiz-hero #jar-5 {
    bottom: 14.64128843vw;
    right: -2.049780381vw;
    transform: rotate(23deg);
}
.quiz-hero #jar-6 {
    top: -3.074670571vw;
    right: 7.027818448vw;
    transform: rotate(-21deg);
}
@media (max-width: 991px) {
    .quiz-section {
        margin-top: 13.33333333vw;
    }
    .quiz-hero {
        background: url(/assets/img/quiz/quiz_hero_bg_mob.png) no-repeat;
        background-size: cover;
        padding: 11.11111111vw 6.666666667vw;
    }
    .quiz-hero .quiz-hero__wrapper {
        gap: 78.33333333vw;
        max-width: 100%;
    }
    .quiz-hero .quiz-hero__content {
        gap: 8.888888889vw;
    }
    .quiz-hero .quiz-hero__row {
        gap: 6.666666667vw;
    }
    .quiz-hero .quiz-hero__title {
        font-size: 5vw;
        line-height: 135%;
    }
    .quiz-hero .quiz-hero__desc {
        font-size: 3.333333333vw;
        line-height: 135%;
    }
    .quiz-hero .quiz-hero__buttons {
        grid-template-columns: 1fr;
        gap: 4.444444444vw;
    }
    .quiz-hero .quiz-hero__buttons .quiz-hero__button {
        font-size: 3.333333333vw;
        line-height: 135%;
        border-radius: 4.444444444vw;
        padding: 4.444444444vw;
    }
    .quiz-hero .quiz-hero__labels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 5.555555556vw;
        column-gap: 10.55555556vw;
    }
    .quiz-hero .quiz-hero__labels .quiz-hero__label {
        font-size: 2.777777778vw;
        line-height: 135%;
    }
    .quiz-hero .quiz-hero__bottom-title {
        font-size: 5.555555556vw;
        line-height: 135%;
    }
    .quiz-hero .quiz-hero__bottom-icons {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 4.444444444vw;
        text-align: start;
    }
    .quiz-hero .quiz-hero__bottom-icons .quiz-hero__bottom-icon {
        gap: 3.333333333vw;
    }
    .quiz-hero .quiz-hero__bottom-icons .quiz-hero__bottom-icon img {
        width: 8.888888889vw;
        height: 8.888888889vw;
    }
    .quiz-hero .quiz-hero__bottom-icons .quiz-hero__bottom-icon .quiz-hero__bottom-icon-title {
        font-size: 3.333333333vw;
        line-height: 135%;
    }

    /* jars */
    .quiz-hero .quiz-hero__jar img {
        width: 27.22222222vw;
    }
    .quiz-hero #jar-1,
    .quiz-hero #jar-6 {
        display: none;
    }
    .quiz-hero #jar-2 {
        left: unset;
        bottom: 70vw;
        right: -6.944444444vw;
        transform: rotate(23deg);
    }
    .quiz-hero #jar-3 {
        bottom: 65.55555556vw;
        left: 21.66666667vw;
        transform: rotate(25deg);
    }
    .quiz-hero #jar-4 {
        bottom: 97.22222222vw;
        right: 25vw;
        transform: rotate(-36deg);
    }
    .quiz-hero #jar-5 {
        bottom: 97.22222222vw;
        right: unset;
        left: -5.555555556vw;
        transform: rotate(-12deg);
    }
}

/* quiz complex block */
.quiz-complex {
    display: flex;
    flex-direction: column;
}
.quiz-complex .quiz-complex__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.quiz-complex .quiz-complex__picture {
    width: 100%;
}
.quiz-complex .quiz-complex__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.756954612vw;
    padding: 4.099560761vw 2.928257687vw;
}
.quiz-complex .quiz-complex__subtitle {
    font-size: 2.342606149vw;
    line-height: 125%;
}
.quiz-complex .quiz-complex__text {
    display: flex;
    flex-direction: column;
    gap: 1.171303075vw;
}
.quiz-complex .quiz-complex__text p {
    font-size: 1.317715959vw;
    line-height: 135%;
    font-weight: 400;
    margin: 0;
}
.quiz-complex .quiz-complex__wrapper.quiz-complex__target {
    gap: 2.928257687vw;
    background-color: var(--black);
}
.quiz-complex .quiz-complex__target .quiz-complex__target-row {
    display: flex;
    align-items: center;
    gap: 2.928257687vw;
}
.quiz-complex .quiz-complex__target .quiz-complex__target-icon {
    width: 3.513909224vw;
    height: 3.513909224vw;
    object-fit: contain;
}
.quiz-complex .quiz-complex__target .quiz-complex__target-text {
    font-size: 1.317715959vw;
    line-height: 135%;
    font-weight: 400;
    color: var(--white);
    margin: 0;
}
@media (max-width: 991px) {
    .quiz-complex .quiz-complex__row {
        grid-template-columns: 1fr;
    }
    .quiz-complex .quiz-complex__wrapper {
        gap: 6.666666667vw;
        padding: 11.11111111vw 6.666666667vw;
    }
    .quiz-complex .quiz-complex__subtitle {
        font-size: 5.555555556vw;
        line-height: 125%;
    }
    .quiz-complex .quiz-complex__text {
        gap: 4.444444444vw;
    }
    .quiz-complex .quiz-complex__text p {
        font-size: 3.888888889vw;
        line-height: 135%;
    }
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: flex !important;
    }
    .quiz-complex .quiz-complex__wrapper.quiz-complex__target {
        gap: 6.666666667vw;
    }
    .quiz-complex .quiz-complex__target-wrapper-mobile {
        flex-direction: column;
        gap: 2.777777778vw;
        color: var(--white);
        margin-bottom: 2.222222222vw;
    }
    .quiz-complex .quiz-complex__target .quiz-complex__target-row {
        gap: 6.666666667vw;
    }
    .quiz-complex .quiz-complex__target .quiz-complex__target-icon {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }
    .quiz-complex .quiz-complex__target .quiz-complex__target-text {
        font-size: 3.888888889vw;
        line-height: 135%;
    }
}

/* quiz faq */
.quiz-faq {
    display: flex;
    gap: 2.928257687vw;
    background-color: var(--gray1);
    padding: 4.099560761vw 2.928257687vw;
}
.quiz-faq .quiz-faq__title {
    max-width: 46.19326501vw;
}
@media (max-width: 991px) {
    .quiz-faq {
        flex-direction: column;
        gap: 6.666666667vw;
        padding: 11.11111111vw 2.222222222vw;
    }
    .quiz-faq .quiz-faq__title {
        max-width: 100%;
        font-size: 5.555555556vw;
        padding: 0 4.444444444vw;
    }
}

/* quiz disclaimer */
.quiz-bad {
    position: relative;
    padding: 1.756954612vw 2.928257687vw;
}
.quiz-bad .quiz-bad__annotation {
    text-align: center;
    font-size: 1.02489019vw;
    line-height: 135%;
    font-weight: 400;
    color: var(--gray4);
}
@media (max-width: 991px) {
    .quiz-bad {
        padding: 6.666666667vw;
    }
    .quiz-bad .quiz-bad__annotation {
        font-size: 2.777777778vw;
    }
}