.quiz{--padding-block: 10.2rem 4rem;--min-height: auto;display:flex;align-items:center;justify-content:center;width:100%;color:var(--secondary-colour);padding-block:var(--padding-block);min-height:var(--min-height)}.quiz__intro{--gap: 4rem;--direction: column;--heading-top: 1.4rem;--content-top: 2.6rem;--button-top: 4.6rem;display:flex;flex-direction:var(--direction);align-items:center;gap:var(--gap)}.quiz__intro-image-wrapper{width:100%;border-radius:2rem;overflow:hidden}.quiz__intro-image-wrapper,.quiz__intro-content-wrapper{flex:1}.quiz__intro-subheading{font-family:var(--body-family);text-transform:uppercase;margin-top:var(--heading-top)}.quiz__intro-content{font-family:var(--heading-family);margin-top:var(--content-top)}.quiz__intro-button{margin-top:var(--button-top)}@media screen and (min-width:1200px){.quiz{--padding-block: 8rem;--min-height: 100rem}.quiz__intro{--gap: 10rem;--direction: row;--content-top: 4.6rem}.quiz__intro--swap-sides{--direction: row-reverse}}.quiz__multiple-choice{--answers-gap: 2.6rem;--controls-gap: 3.6rem;--answer-padding: 1.6rem .8rem;--answers-grid-gap: 2rem;--max-width: 50rem;max-width:var(--max-width);width:100%}@media screen and (min-width:1200px){.quiz__multiple-choice{--answer-padding: 3rem 2rem;--answers-gap: 3.5rem;--controls-gap: 8rem;--answers-grid-gap: 4rem;--max-width: 112rem}}.quiz__timed{--answers-gap: 2.6rem;--controls-gap: 3.6rem;--answer-padding: 1.6rem .8rem;--answers-grid-gap: 2rem;--max-width: 50rem;margin:0 auto;max-width:var(--max-width)}@media screen and (min-width:1200px){.quiz__timed{--answer-padding: 3rem 2rem;--answers-gap: 3.5rem;--controls-gap: 8rem;--answers-grid-gap: 4rem;--max-width: 112rem}}.quiz__pairing{--answers-gap: 2.6rem;--controls-gap: 3.6rem;--answer-padding: 0 .4rem;--answers-grid-gap: 2rem;--max-width: 112rem;margin:0 auto;max-width:var(--max-width)}.quiz__pairing .quiz__answer-title{align-items:center;justify-content:center;padding:var(--answer-padding)}.quiz__pairing .quiz__answer-media{--media-max-width: 100%;padding:0;width:100%}.quiz__pairing .quiz__answer{--label-gap: 0;--label-max-height: 100%}@media screen and (min-width:1200px){.quiz__pairing{--answers-gap: 0;--controls-gap: 8rem;--answers-grid-gap: 4rem}.quiz__pairing .quiz__answers{--grid-columns: repeat(2, 1fr);--grid-rows: repeat(2, auto)}.quiz__pairing .quiz__answer{--label-gap: 0}.quiz__pairing .quiz__answer-label span{margin-top:0;padding:0 2rem}}.quiz__results{--progress-space: 5rem;--heading-space: 2.6rem;--progress-result-space: .8rem;text-align:center;max-width:42rem;margin:0 auto}.quiz__results-progress-wrapper{margin-bottom:var(--progress-space)}.quiz__results-result{font-size:var(--small-body);line-height:var(--lh-buttons);margin-top:var(--progress-result-space)}.quiz__results-heading{margin-bottom:var(--heading-space)}.quiz__results-content{font-family:var(--heading-family);padding-inline:1.4rem}.quiz__form{--space-top: 4.6rem;--direction: column;--input-gap: 2.6rem;margin-top:var(--space-top);text-align:left}.quiz__form .fieldset{display:flex;flex-direction:var(--direction);align-items:center;gap:.8rem}.quiz__form .field-label{display:block;font-family:var(--heading-family);font-size:var(--small-body);line-height:var(--lh-small-body);margin-bottom:.8rem}.quiz__form .input{background-color:var(--secondary-colour);height:4.4rem;border-radius:var(--inputs-border-radius);padding:1.2rem 1.6rem}.quiz__form .button{display:block;margin:var(--input-gap) auto 0 auto}@media screen and (min-width:1200px){.quiz__results{--heading-space: 4.6rem;--progress-space: 7rem}.quiz__form{--input-gap: 4.6rem}}.quiz__question{display:block;text-align:center}.quiz__answer-group{--direction: column;--gap: 0;--media-max-width: 28rem;--overlay-position: .8rem;--overlay-padding: 1rem 2rem;--margin-top: 2.6rem;display:flex;flex-direction:var(--direction);align-items:center;gap:var(--gap);margin-top:var(--margin-top)}.quiz__answer-group__media{position:relative;max-width:var(--media-max-width);width:100%}.quiz__answer-group__media .media{border-radius:2rem;overflow:hidden}.quiz__answer-group__media p{position:absolute;bottom:var(--overlay-position);left:var(--overlay-position);right:var(--overlay-position);text-align:center;padding:var(--overlay-padding);border-radius:var(--button-border-radius);background-color:rgb(var(--black-rgb) / .15);text-transform:uppercase;font-size:var(--small-body);line-height:var(--lh-buttons);-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}@media screen and (min-width:1200px){.quiz__answer-group{--direction: row;--gap: 8rem;--media-max-width: 100%;--margin-top: 3.5rem;--overlay-position: 2rem;--overlay-padding: 2rem}.quiz__answer-group__media p{font-size:var(--h5);line-height:var(--lh-h5)}}.quiz__answers{--grid-columns: repeat(2, 1fr);--grid-rows: auto;display:grid;grid-template-columns:var(--grid-columns);grid-template-rows:var(--grid-rows);align-items:center;margin-top:var(--answers-gap);column-gap:var(--answers-grid-gap);row-gap:var(--answers-grid-gap);justify-content:center;width:100%;height:100%}@media screen and (min-width:1200px){.quiz__answers{--grid-columns: repeat(4, 1fr);--grid-rows: 1fr}}.quiz__answer{--icon-width: 11rem;--icon-height: 8rem;--media-max-width: 12rem;--label-gap: 0;--font-size: var(--small-body);--line-height: var(--lh-buttons);--background: var(--secondary-colour);--colour: var(--copper);--label-max-height: 6rem;height:100%;width:100%;text-align:center;border-radius:1.6rem;overflow:hidden;background-color:var(--secondary-colour);font-weight:var(--medium);font-size:var(--font-size);line-height:var(--line-height);text-transform:uppercase;aspect-ratio:1/1}.quiz__answer input{position:absolute;opacity:0;pointer-events:none}.quiz__answer-label{display:flex;flex-direction:column;align-items:center;justify-content:var(--justify-label, space-between);gap:var(--label-gap);height:100%;cursor:pointer}.quiz__answer-media{max-width:var(--media-max-width);padding:1rem}.quiz__answer-title{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--background);color:var(--colour);line-height:var(--lh-h5);min-height:3.2rem;max-height:var(--label-max-height);flex:1}.quiz__answer:has(input:checked) .quiz__answer-title{--background: var(--copper);--colour: var(--secondary-colour)}.quiz__answer:has(input:disabled) .quiz__answer-label{cursor:not-allowed;opacity:.3}.quiz__answer .icon{flex:1;padding:var(--answer-padding);color:var(--colour)}@media screen and (min-width:750px){.quiz__answer{--media-max-width: 80%}}@media screen and (min-width:1200px){.quiz__answer{--icon-width: 13.5rem;--icon-height: 10.5rem;--media-max-width: 100%;--padding: 4.5rem 3rem 2rem;--label-gap: 0;--font-size: var(--h5);--line-height: var(--lh-h5);aspect-ratio:1/1}}.quiz__controls{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;margin-top:var(--controls-gap)}.quiz__controls-previous{font-size:var(--small-body);line-height:var(--lh-buttons)}.progress-wrapper{--width: 8.5rem;--height: 8.5rem;--percentage: 100;--duration: 10s;--size: var(--large-body);--colour: var(--secondary-colour);--stroke-width: 3;--margin-bottom: 0;position:relative;margin-bottom:var(--margin-bottom)}.progress-wrapper--timer{--width: 5.5rem;--height: 5.5rem;--size: var(--body);--margin-bottom: 3rem}.progress-wrapper__amount{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--heading-family);font-size:var(--size);color:var(--colour)}.progress{display:block;stroke:var(--copper);width:var(--width);height:var(--height);margin:0 auto}.progress__bg{fill:none;stroke:var(--copper-10);stroke-width:var(--stroke-width)}.progress__circle{fill:none;stroke-width:var(--stroke-width);stroke-linecap:round;stroke-dasharray:var(--percentage),100;animation:progress var(--duration) ease-out forwards;animation-delay:1s;animation-play-state:var(--timer-play-state, running)}.progress__percentage{fill:var(--secondary-colour);stroke:var(--secondary-colour);font-family:var(--heading-family);font-size:10px;text-anchor:middle}@keyframes progress{0%{stroke-dasharray:0 100}}@media screen and (min-width:1200px){.progress-wrapper{--width: 14rem;--height: 14rem;--size: var(--h3);--stroke-width: 2}.progress-wrapper--timer{--width: 8rem;--height: 8rem;--size: var(--large-body)}}.quiz__breadcrumbs{--dot-margin: 1.26rem;--dot-size: .84rem;--active-dot-size: 3.36rem;--gap: 2rem;--margin: 3rem;--justify: space-between;--line: .2rem;position:relative;display:flex;justify-content:var(--justify);align-items:center;gap:var(--gap);max-width:100dvw;width:max-content;margin:0 auto var(--margin)}.quiz__breadcrumbs:before{content:"";position:absolute;width:calc(100% - var(--dot-size));height:var(--line);background-color:var(--copper);top:48%;left:50%;transform:translate(-50%);z-index:0}.quiz__breadcrumb{--background: transparent;--border-colour: transparent;position:relative;display:block;width:var(--active-dot-size);height:var(--active-dot-size);border-radius:100%;background-color:var(--background);border:1.2px solid var(--border-colour)}.quiz__breadcrumb:after{content:"";position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--copper);border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.quiz__breadcrumb[data-active=true]{--background: var(--primary-colour);--border-colour: var(--copper)}.quiz__breadcrumb:not([data-active=true]):last-of-type:after{right:0;left:auto;transform:translateY(-50%)}.quiz__breadcrumb:not([data-active=true]):first-of-type:after{left:0;right:auto;transform:translateY(-50%)}@media screen and (min-width:1200px){.quiz__breadcrumbs{--dot-margin: 1.8rem;--dot-size: 1.2rem;--active-dot-size: 4.8rem;--gap: 12.3rem;--margin: 5rem;--justify: center}}[data-quiz-screen]{display:none}[data-quiz-screen][data-timer=finished]{--timer-play-state: paused}[data-quiz-screen][data-visible=true]{display:block}[data-quiz-screen=intro][data-visible=true]{display:flex}
/*# sourceMappingURL=/cdn/shop/t/2/assets/quiz.css.map */