.page{display:flex;min-height:100vh;flex-direction:column}.header{background-color:#fff;padding:1rem 0;box-shadow:0 1px 3px rgba(0,0,0,.1)}.header__container{margin:0 auto;display:flex;justify-content:space-between;padding:0 1rem}.header__logo{height:3rem;width:11rem}@media (min-width:768px){.header__logo{height:5rem;width:18rem}}.header__auth{margin-top:.75rem}.lading__button{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:#fff;transition:background-color .3s}.button--login{background-color:#22c55e}.button--login:hover{background-color:#16a34a}.button--logout{background-color:#ef4444}.button--logout:hover{background-color:#dc2626}.button--green{background-color:#16a34a;padding:.75rem 1.5rem}.button--green:hover{background-color:#15803d}.button--red{background-color:#dc2626;padding:.75rem 1.5rem}.button--red:hover{background-color:#b91c1c}.button__icon{margin-left:.5rem;height:1.25rem;width:1.25rem;transform:translateX(0);transition:transform .3s}.button:hover .button__icon{transform:translateX(.25rem)}.main{display:flex;flex-grow:1;flex-direction:column}@media (min-width:768px){.main{flex-direction:row}}.panel{position:relative;flex:1;transition:flex .5s}.panel--left,.panel--right{min-height:50vh}@media (min-width:768px){.panel--left,.panel--right{min-height:0}.panel--expanded{flex:1.2}.panel--shrunk{flex:0.8}}.panel__background{position:relative;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:2rem;text-align:center;background-size:cover;background-position:50%}.panel__background--green{background-image:url(https://picsum.photos/id/1/1200/800)}.panel__background--red{background-image:url(https://picsum.photos/id/20/1200/800)}.panel__overlay{position:absolute;inset:0;opacity:.75;transition:opacity .3s}.panel__overlay--green{background-color:#14532d}.panel__overlay--red{background-color:#7f1d1d}.panel__content{position:relative;z-index:10;max-width:28rem;margin:0 auto}.card{background-color:hsla(0,0%,100%,.9);border-radius:.5rem;padding:2rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:scale(1);transition:transform .3s}.card:hover{transform:scale(1.05)}.card__icon{display:flex;align-items:center;justify-content:center;height:4rem;width:4rem;border-radius:9999px;margin:0 auto 1rem}.card__icon--green{background-color:#dcfce7}.card__icon--red{background-color:#fee2e2}.card__icon-svg{height:2rem;width:2rem}.card__icon--green .card__icon-svg{color:#16a34a}.card__icon--red .card__icon-svg{color:#dc2626}.card__title{margin-bottom:1rem;font-size:1.875rem;font-weight:700}.card__title--green{color:#166534}.card__title--red{color:#991b1b}.card__text{margin-bottom:1.5rem;color:#374151}.footer{background-color:#1f2937;padding:1.5rem 0;color:#fff}.footer__container{max-width:1200px;margin:0 auto;padding:0 1rem;text-align:center}.footer__text{margin:0}