:root {
    --bar: 6.25vw;
    --bar-slim: 3.6vw;
    --full-height: 70vw;
    --full-height-slim: 30vw;
}

@media screen and (min-width: 1280px) {
    :root {
        --bar: 80px;
        --bar-slim: 46px;
        --full-height: 896px;
        --full-height-slim: 30vw;
    }
}

:root {
    --japan: #FF5005;
    --southkorea: #F32758;
    --taiwan: #F63AB0;
    --hongkong: #B229F3;
    --aus: #23A6C6;
    --japan-bg: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_japan_bg.jpg');
    --southkorea-bg: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_southKorea_bg.jpg');
    --taiwan-bg: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_taiwan_bg.jpg');
    --hongkong-bg: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_hongKong_bg.jpg');
    --aus-bg: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeck_aus_bg.jpg?v=2');
    --japan-hands: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_japan_hands.png');
    --southkorea-hands: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_southKorea_hands.png');
    --taiwan-hands: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_taiwan_hands.png');
    --hongkong-hands: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeckAsia_hongKong_hands.png');
    --aus-hands: url('https://cdn.fastly.steamstatic.com/steamdeck/images/asia/steamDeck_aus_hands.png?v=2');
    --height: calc( var(--full-height) - var(--bar) );
}

:root .slim {
    --height: calc( var(--full-height-slim) - var(--bar-slim) );
    --bar: var(--bar-slim);
}

section.asia.feature {
    padding: 0;
    display: grid;
    grid-template-columns: [left] var(--bar) [margin] 1fr [ver] var(--bar) [right];
    grid-template-rows: [top] var(--bar) [hor] var(--height) [bottom];
    background-size: 75%, cover;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
}
@media screen and (min-width: 1280px) {
    section.asia.feature {
        background-size: 945px, cover;
    }
}

section.Australia-slim {
    background-color: var(--aus);
    color: #fff;
    padding-top: 1.1em;
    padding-bottom: 1.4em;
}
.Australia-slim .content.head {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
}
.Australia-slim img {
    margin-top: 0.8em;
    margin-bottom: 0.6em;
}
.Australia-slim h3 {
    font-size: 2em;
    font-weight: 800;
    line-height: 1em;
    color: #fff;
    text-align: center;
}
.Australia-slim .head h3 {
    color: #000;
    text-transform: uppercase;
    text-align: left;
}
.Australia-slim .head h3 span {
    color: #fff;
}
.Australia-slim p {
    text-align: right;
    vertical-align: bottom;
    align-content: end;
    font-size: 1.2em;
}
.Australia-slim h3, .Australia-slim p {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}
.Australia-slim .content.cta {
    text-align: center;
}
section.Australia-slim button.mobile-slim,
.le-white .calendar button {
    padding-top: 0.5em;
    padding-bottom: 0.55em;
    padding-left: 1em;
    padding-right: 1em;
}

section.Australia-slim button.mobile-slim {
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
    margin-top: 1.1em;
}
.asia.feature .bar.top {
    grid-column-start: left;
    grid-column-end: right;
    grid-row-start: top;
    grid-row-end: hor;
}
.asia.feature .bar.right {
    grid-column-start: ver;
    grid-column-end: right;
    grid-row-start: hor;
    grid-row-end: bottom;
}
.asia.feature .content {
    grid-column-start: margin;
    grid-column-end: ver;
    grid-row-start: hor;
    grid-row-end: bottom;
    color: #fff;
}

.aus-announce .asia.feature .content {
    display: flex;
    align-items: end;
    padding-bottom: 2em;
    text-align: center;
    justify-content: center;
}

h1 {
    font-size: calc( 0.96 * var(--bar) );
}

.uk h1.SouthKorea {
    font-size: calc( 0.89 * var(--bar) );
}

h3 {
    font-size: calc( 0.6 * var(--bar) );
    line-height: 1.2em;
    font-weight: 500;
    color: #fff;
}

.aus-announce .asia.feature h3 {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 0.1em;
}

.asia.feature .bar {
    white-space: nowrap;
}
.asia.feature .bar.top {
    width: 100%;
    height: 100%;
    text-align: right;
}

.asia.feature.Japan {
    background-image: var(--japan-hands), var(--japan-bg);
}
.asia.feature.SouthKorea {
    background-image: var(--southkorea-hands), var(--southkorea-bg);
}
.asia.feature.Taiwan {
    background-image: var(--taiwan-hands), var(--taiwan-bg);
}
.asia.feature.HongKong {
    background-image: var(--hongkong-hands), var(--hongkong-bg);
}
.asia.feature.Australia {
    background-image: var(--aus-hands), var(--aus-bg);
}
.slim .asia.feature.Australia {
    background-image: var(--aus-bg);
    background-size: cover;
    background-position: top;
}
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content: var(--japan-hands) var(--japan-bg) var(--southkorea-hands) var(--southkorea-bg) var(--taiwan-hands) var(--taiwan-bg) var(--hongkong-hands) var(--hongkong-bg);
 }

.asia.feature.Japan .bar,
.asia.Japan {
    background-color: var(--japan);
}
.asia.feature.SouthKorea .bar,
.asia.SouthKorea {
    background-color: var(--southkorea);
}
.asia.feature.Taiwan .bar,
.asia.Taiwan {
    background-color: var(--taiwan);
}
.asia.feature.HongKong .bar,
.asia.HongKong {
    background-color: var(--hongkong);
}
.asia.feature.Australia .bar,
.asia.Australia {
    background-color: var(--aus);
}

.asia.feature .bar h1 {
    text-transform: uppercase;
    line-height: 1em;
}
.asia.feature .bar.top h1 {
    padding-right: var(--bar);
}
.asia.feature .bar.right h1 {
    display: none;
    color: #fff;
    transform: rotate(90deg) translateX(-0.03em);
}

.chinese .asia.feature .bar.right h1 {
    transform: none;
    white-space: normal;
    padding-right: 0.04em;
}

.asia.feature.Japan .bar.right h1.Japan {
    display: block;
}
.asia.feature.SouthKorea .bar.right h1.SouthKorea {
    display: block;
}
.asia.feature.Taiwan .bar.right h1.Taiwan {
    display: block;
}
.asia.feature.HongKong .bar.right h1.HongKong {
    display: block;
}
.asia.feature.Australia .bar.right h1.Australia {
    display: block;
}

.asia.feature .content {
    width: 100%;
    height: 100%;
    max-width: unset;
    padding-top: var(--bar);
}

.asia.feature .content .subhead {
    width: 77%;
    max-width: 850px;
}

.aus-announce .asia.feature .content .subhead {
    font-size: 1.2em;
    font-weight: 500;
}

.aus-announce .asia .content .button-container {
    text-align: center;
}

.aus-announce .asia .content .button-container span {
    vertical-align: -0.02em;
    color: #fff;
}
.aus-announce .asia.hide-desktop .content .button-container span, 
.aus-announce .asia.hide-desktop .content .button-container button {
    font-size: calc( 0.7 * var(--bar) );
}
.aus-announce .asia.hide-desktop .content .button-container button {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-left: 0.5em;
    padding-left: 0.9em;
    padding-right: 0.85em;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}
.aus-announce .asia.feature .content button {
    margin-left: 1em;
}

.aus-announce .asia.feature .content .subhead button {
    font-size: 70%;
}

.asia.feature .content .button-container {
    margin-top: 3em;
}
.aus-announce .asia.feature .content .button-container {
    margin-top: 0.5em;
}

h3.highlighter {
    padding-left: 0.4em;
}

.sep {
z-index: 2;
position: relative;
line-height: 1em;
display: inline-block;
margin-right: 0.625em;
white-space: nowrap;
}

.sep:first-child {
display: none;
}

.sep .accent-bg {
    z-index: -1;
    display: block;
    width: 106%;
    position: absolute;
    height: 0.85em;
    margin: 0;
    top: 0.35em;
    left: -0.4em;
    background-color: #EE3F9E;
}

.Japan h3 .sep .accent-bg {
    background-color: var(--japan);
}
.SouthKorea h3 .sep .accent-bg {
    background-color: var(--southkorea);
}
.Taiwan h3 .sep .accent-bg {
    background-color: var(--taiwan);
}
.HongKong h3 .sep .accent-bg {
    background-color: var(--hongkong);
}
.Australia h3 .sep .accent-bg {
    background-color: var(--aus);
}

section.asia.sub {
    padding: 1em var(--bar);
}
section.asia.sub.Australia.head {
    padding-bottom: 0.3em;
}
section.asia.sub h3 {
    font-size: 2em;
}
section.asia.sub.hide-desktop h3 {
    text-align: center;
    font-weight: 800;
    font-size: calc( 0.96 * var(--bar) );
    margin-bottom: 0;
}
section.asia.buttonhole {
    padding-top: 0.5em;
    padding-bottom: 1.5em;
}

section.asia.buttonhole.Australia {
    padding-top: 0;
}

section.asia.buttonhole.Australia button {
    margin-top: 1em;
}

section.le-white, div.le-white {
    background-color: var(--aus);
}

.le-white .outercontent section {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: 85% 15%;
    padding-top: 3em;
}

.le-white .badge {
    width: 100%;
    height: auto;
}
.le-white p.announce {
    padding-left: 20%;
}

.le-white .calendar {
    grid-column: 1 / -1;
    text-align: center;
}
.le-white .calendar p {
    display: inline-block;
}
.le-white .calendar a {
    display: inline-block;
}

.hide-desktop .le-white .calendar h3 {
    font-weight: 900;
    margin-bottom: 1.5em;
}

.hide-desktop section.le-white {
    background-color: #008DA8;
}

.hide-desktop .le-white .calendar p {
    margin-bottom: 1em;
}

.le-white .buttoncontainer {
    margin-left: 0.8em;
}

.le-white button img {
    height: 1em;
    width: auto;
    vertical-align: -0.08em;
    margin-right: 0.2em;
}

.le-white.hide-desktop .badge {
    width: 45%;
    margin-bottom: 1em;
}