.principles-wrapper{flex-direction:column;gap:.5rem;width:100%;display:flex}.principle-panel{border-radius:5px;align-items:flex-end;height:75vh;padding:5%;text-decoration:none;display:flex;position:relative;overflow:hidden}.principle-panel:before{content:"";z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(#0000 20%,#000000e6 100%);position:absolute;inset:0}.principle-content{z-index:2;width:100%;position:relative}.principle-content h3{color:#e6e8ea;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5em;font-size:1.4rem;font-weight:500;line-height:1.3em}.principle-content p{color:#e6e8ea;opacity:.9;max-width:45ch;font-size:.9rem;font-weight:300;line-height:1.6em}.principle-btn{color:#fff;letter-spacing:.05em;background-color:#0000;border:1px solid #fff;border-radius:5px;margin-top:1rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:background-color .3s,color .3s;display:inline-block}@media (min-width:1024px){.principles-wrapper{flex-direction:row;gap:.5rem;height:100vh}.principle-panel{flex:1;height:auto;min-height:auto;padding:3%;transition:flex .7s cubic-bezier(.65,0,.35,1),opacity .5s}.principle-panel:before{background:linear-gradient(#000000b3 0%,#0000 40%),linear-gradient(#0000 20%,#000000e6 100%);transition:opacity .7s cubic-bezier(.65,0,.35,1)}.principle-content h3{font-size:1.6rem;line-height:1.25em}.principle-panel{min-height:300px}}@media (hover:hover) and (min-width:1024px){.principle-content p,.principle-btn{opacity:0;max-height:0;margin-top:0;transition:opacity .5s ease-out .1s,max-height .6s ease-out .1s,transform .5s ease-out .1s,margin-top .5s ease-out .1s;overflow:hidden;transform:translateY(10px)}.principle-panel{cursor:pointer}.principles-wrapper:hover .principle-panel{opacity:.65}.principles-wrapper .principle-panel:hover{opacity:1;flex:2.5}.principles-wrapper .principle-panel:hover:before{opacity:1}.principles-wrapper .principle-panel:hover .principle-content p{opacity:.9;max-height:15em;transform:translateY(0)}.principles-wrapper .principle-panel:hover .principle-btn{opacity:1;max-height:10em;margin-top:1rem;transform:translateY(0)}.principle-btn:hover{color:#000;background-color:#fff}}