:root{--d: .7s;--e: cubic-bezier(.19, 1, .22, 1);--font-sans: "Rubik", sans-serif;--font-serif: "Cardo", serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;place-items:center;background-color:#121212}.page-content{display:grid;grid-gap:1rem;padding:1rem;max-width:640px;margin:0 auto;font-family:var(--font-sans)}@media (min-width: 800px){.page-content{grid-template-columns:repeat(2,1fr)}}.card{border-radius:12px;border:1px solid rgba(255,255,255,.3);position:relative;display:flex;align-items:flex-end;overflow:hidden;width:100%;text-align:center;color:#f5f5f5}.card>a{text-decoration:none!important;color:unset!important}@media (max-width: 799.98px){.card>a{pointer-events:none;cursor:unset!important}.card a.btn{pointer-events:auto;cursor:pointer!important}}@media (min-width: 800px){.card{height:350px}}.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:110%;background-size:cover;background-position:0 0;transition:transform calc(var(--d) * 1.5) var(--e);pointer-events:none}.card:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:200%;pointer-events:none;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.009) 11.7%,rgba(0,0,0,.034) 22.1%,rgba(0,0,0,.072) 31.2%,rgba(0,0,0,.123) 39.4%,rgba(0,0,0,.182) 46.6%,rgba(0,0,0,.249) 53.1%,rgba(0,0,0,.32) 58.9%,rgba(0,0,0,.394) 64.3%,rgba(0,0,0,.468) 69.3%,rgba(0,0,0,.54) 74.1%,rgba(0,0,0,.607) 78.8%,rgba(0,0,0,.668) 83.6%,rgba(0,0,0,.721) 88.7%,rgba(0,0,0,.762) 94.1%,rgba(0,0,0,.79) 100%);transform:translateY(-50%);transition:transform calc(var(--d) * 2) var(--e)}.card:nth-child(1):before{background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://cdn.xyo.gg/static/images/landing/newworld.jpg);background-size:cover;background-blend-mode:saturation}@media (min-width: 800px){.card:not(:hover):nth-child(1):before{background-image:linear-gradient(black,black),url(https://cdn.xyo.gg/static/images/landing/newworld.jpg);background-size:cover;background-blend-mode:saturation}}.card:nth-child(2):before{background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://cdn.xyo.gg/static/images/landing/vrising.jpg);background-size:cover;background-blend-mode:saturation}@media (min-width: 800px){.card:not(:hover):nth-child(2):before{background-image:linear-gradient(black,black),url(https://cdn.xyo.gg/static/images/landing/vrising.jpg);background-size:cover;background-blend-mode:saturation}}.card:nth-child(3):before{background-image:linear-gradient(black,black),url(https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);background-size:cover;background-blend-mode:saturation}.card:nth-child(4):before{background-image:linear-gradient(black,black),url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);background-size:cover;background-blend-mode:saturation}.content{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:6rem 1rem;transition:transform var(--d) var(--e);z-index:1}.content>*+*{margin-top:1rem}.title{font-size:1.3rem;font-weight:700;line-height:1.2}@media (min-width: 800px){.title{margin-top:-5rem}}.copy{font-size:1.125rem;font-style:italic;line-height:1.35}.btn{cursor:pointer;margin-top:1.5rem;padding:.75rem 1.5rem;font-size:.85rem;font-weight:700;letter-spacing:.025rem;text-transform:uppercase;color:#fff;background-color:#000;border:none;text-decoration:none;border-radius:4px;border:1px solid rgba(255,255,255,.3)}.btn:hover{background-color:#0d0d0d}@media (hover: hover) and (min-width: 800px){.card:not(.static):after{transform:translateY(0)}.content{transform:translateY(calc(100% - 4.5rem))}.content>*:not(.title){opacity:0;transform:translateY(1rem);transition:transform var(--d) var(--e),opacity var(--d) var(--e)}.card:not(.static):hover,.card:not(.static):focus-within{align-items:center}.card:not(.static):hover:before,.card:not(.static):focus-within:before{transform:translateY(-4%)}.card:not(.static):hover:after,.card:not(.static):focus-within:after{transform:translateY(-50%)}.card:not(.static):hover .content,.card:not(.static):focus-within .content{transform:translateY(2.5rem)}.card:not(.static):hover .content>*:not(.title),.card:not(.static):focus-within .content>*:not(.title){opacity:1;transform:translateY(0);transition-delay:calc(var(--d) / 8)}.card:not(.static):focus-within:before,.card:not(.static):focus-within:after,.card:not(.static):focus-within .content,.card:not(.static):focus-within .content>*:not(.title){transition-duration:0s}}