:root{--button-background:var(--color-vauxhall-pink);--button-color:var(--color-text-contrast)}.block__vauxhall-hero{overflow:hidden;padding:60px;padding-bottom:var(--spacing-lg);background:var(--color-surface-secondary);position:relative;width:100%;--height:calc(min(100vw / 16 * 8, 100vh - var(--header-height) - 150px) + 60px + var(--spacing-lg))}.block__vauxhall-hero .illustrations div{width:40vw;height:40vw;position:absolute;top:50%;left:50%;transform:translate(-110%,-50%);background-size:contain;animation:hide 1s 2.5s ease-out forwards}@keyframes hide{0%{opacity:1}100%{opacity:0}}.block__vauxhall-hero .illustrations div:nth-child(2){transform:translate(10%,-50%)}.block__vauxhall-hero .illustrations .dancing-couple{background-image:url(illustrations/dancing-couple.png)}.block__vauxhall-hero .illustrations .another-striding-couple{background-image:url(illustrations/another-striding-couple.png)}.block__vauxhall-hero .illustrations .blimp-man{background-image:url(illustrations/blimp-man.png)}.block__vauxhall-hero .illustrations .boy-on-a-ball{background-image:url(illustrations/boy-on-a-ball.png)}.block__vauxhall-hero .illustrations .dancer{background-image:url(illustrations/dancer.png)}.block__vauxhall-hero .illustrations .dancing-lady-in-dress{background-image:url(illustrations/dancing-lady-in-dress.png)}.block__vauxhall-hero .illustrations .lady-with-musical-notation{background-image:url(illustrations/lady-with-musical-notation.png)}.block__vauxhall-hero .illustrations .lion-tamer{background-image:url(illustrations/lion-tamer.png)}.block__vauxhall-hero .illustrations .rearing-horse-and-lady{background-image:url(illustrations/rearing-horse-and-lady.png)}.block__vauxhall-hero .illustrations .striding-couple{background-image:url(illustrations/striding-couple.png)}.block__vauxhall-hero .illustrations .top-hat-man{background-image:url(illustrations/top-hat-man.png)}.block__vauxhall-hero h1{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;font:var(--type-h1);text-transform:uppercase;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:start}.block__vauxhall-hero h1 span{display:inline-block;white-space:nowrap;padding:10px 25px;position:absolute;top:0;left:0}.block__vauxhall-hero h1 span:nth-child(1){background-color:var(--color-vauxhall-yellow);color:var(--color-vauxhall-pink);animation:movefirst 1s 2s ease-out forwards;transform:translate(-50%,-50%)}@keyframes movefirst{0%{transform:translate(-50%,-50%)}100%{transform:translate(calc(-50vw + 60px),calc(-1 * var(--height)/ 2 + 50px))}}.block__vauxhall-hero h1 span:nth-child(2){margin-left:var(--spacing-xl);background-color:var(--color-vauxhall-green);color:var(--color-vauxhall-blue);animation:movesecond 1s 2s ease-out forwards;transform:translate(-50%,50%)}@keyframes movesecond{0%{transform:translate(-50%,50%)}100%{transform:translate(calc(50vw - 60px - 100% - var(--spacing-xl)),calc(var(--height)/ 2 - 100% - 50px))}}.block__vauxhall-hero .media-holder{aspect-ratio:16/8;width:100%;display:flex;align-items:center;max-height:calc(100vh - var(--header-height) - 150px)}.block__vauxhall-hero .media-holder .media{width:100%;min-width:100%;height:0%;position:relative;animation:full-height 1s 2s ease-out forwards}@keyframes full-height{0%{height:0%}50%{transform:rotate(0)}100%{height:100%;transform:rotate(-2deg)}}.block__vauxhall-hero .media-holder .media img,.block__vauxhall-hero .media-holder .media video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;left:0;border-radius:8px}@media screen and (max-width:768px){.block__vauxhall-hero{padding:40px}.block__vauxhall-hero .media-holder{aspect-ratio:10/16}.block__vauxhall-hero .illustrations div{width:100vw;height:100vw;animation:fadeout 1s 2s ease-out forwards}.block__vauxhall-hero .illustrations div:first-child{transform:translate(-50%,-80%)}.block__vauxhall-hero .illustrations div:nth-child(2){transform:translate(-50%,20%)}@keyframes fadeout{0%{opacity:1}100%{opacity:0}}.block__vauxhall-hero h1 span{padding:5px 15px}.block__vauxhall-hero h1 span:nth-child(1){animation:movefirstmob 1s 2s ease-out forwards}@keyframes movefirstmob{0%{transform:translate(-50%,-50%)}100%{transform:translate(calc(-50vw + 30px),calc(-50vw - 50px))}}.block__vauxhall-hero h1 span:nth-child(2){animation:movesecondmob 1s 2s ease-out forwards;margin-left:30px}@keyframes movesecondmob{0%{transform:translate(-50%,50%)}100%{transform:translate(calc(50vw - 100% - 50px),50vw)}}}