.splash { width: 100vw; height: 100vh; background-color: #7289da; background-image: linear-gradient(225deg, #7289da 0%, #5d70b4 100%); color: #fff; display: flex; flex-direction: column; align-items: center; a { color: #fff; } .wrapper { display: grid; grid-template-columns: auto 400px; grid-template-rows: auto repeat(4, 1fr); align-items: start; .logo { grid-column: 1; grid-row: 1/-1; // Span all width: 300px; height: 300px; margin-right: 64px; } h1 { grid-column: 2; font-size: 80px; font-weight: 300; margin-top: 40px } .description { grid-column: 2; color: #f1f5ff; } .actions { grid-column: 2; display: flex; .btn { margin: 12px; text-decoration: none; padding: 8px 24px; border: 1px solid #fff; border-radius: 4px; transition: all 120ms ease-in-out; background-color: hsla(0, 0%, 100%, 0.05); &:not(.disabled):hover { background-color: hsla(0, 0%, 100%, 0.25); box-shadow: 0 3px 12px -2px hsla(0, 0%, 0%, 0.2); } &.disabled { cursor: default; opacity: 0.75; } } } } }