.principles{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;min-height:38rem}.principle-button{border:none;background:none;font-family:var(--font-heading-family);font-size:1.1rem;font-weight:600;width:10rem;height:10rem;display:flex;align-items:center;justify-content:center;border-radius:100%;margin:0 auto;cursor:pointer;transition:width .5s,height .5s,box-shadow .25s;animation:hover 4s linear infinite;color:rgb(var(--color-foreground))}.principle-button:not(.active):hover{animation-play-state:paused}.principle-button:nth-of-type(odd){width:7rem;height:7rem}.principle-button.active{width:16rem;height:16rem;animation:none}@media screen and (min-width: 750px){.principles{min-height:60rem}.principle-button{width:15rem;height:15rem;font-size:1.2rem}.principle-button:nth-of-type(odd){width:11rem;height:11rem}.principle-button.active{width:30rem;height:30rem}}.principle-button:nth-of-type(6n-5){box-shadow:0 0 rgb(var(--color-blue));background-color:rgb(var(--color-blue));align-self:flex-end;animation-delay:.5s}.principle-button:nth-of-type(6n-5):not(.active):hover{box-shadow:0 0 0 .6rem rgb(var(--color-blue))}.principle-button:nth-of-type(6n-4){box-shadow:0 0 rgb(var(--color-brown));background-color:rgb(var(--color-brown));grid-column:span 2;animation-delay:1s}.principle-button:nth-of-type(6n-4):not(.active):hover{box-shadow:0 0 0 .6rem rgb(var(--color-brown))}.principle-button:nth-of-type(6n-3){box-shadow:0 0 rgb(var(--color-green));background-color:rgb(var(--color-green));grid-column:span 2;animation-delay:1.5s}.principle-button:nth-of-type(6n-3):not(.active):hover{box-shadow:0 0 0 .6rem rgb(var(--color-green))}.principle-button:nth-of-type(6n-2){box-shadow:0 0 rgb(var(--color-fuscia));background-color:rgb(var(--color-fuscia));align-self:flex-start;animation-delay:2s}.principle-button:nth-of-type(6n-2):not(.active):hover{box-shadow:0 0 0 .6rem rgb(var(--color-fuscia))}.principle-button:nth-of-type(6n-1){box-shadow:0 0 rgb(var(--color-olive));background-color:rgb(var(--color-olive));align-self:flex-start;animation-delay:2.5s}.principle-button:nth-of-type(6n-1):not(.active):hover{box-shadow:0 0 0 .6rem rgb(var(--color-olive))}.principle-button:nth-of-type(6n){box-shadow:0 0 rgb(var(--color-red));background-color:rgb(var(--color-red));align-self:flex-start;animation-delay:2.5s}.principle-button:nth-of-type(6n):not(.active):hover{box-shadow:0 0 0 .6rem rgb(var(--color-red))}.principle-content{display:none}.principle-content.active{display:block}@keyframes hover{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}
/*# sourceMappingURL=/cdn/shop/t/109/assets/section-principles.css.map */