.samples{padding:4rem 0;background-color:#ece9e7}.samples .sample-filter{margin:0 0 4rem auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative}.samples .sample-filter__btn{padding:2.2rem 4.2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:1.6rem;background-color:#323232;color:#ece9e7;border-radius:.8rem;cursor:pointer}.samples .sample-filter__btn:after{content:"";display:inline-block;width:3.2rem;height:3.2rem;background:url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_9780_3589)'%3e%3cpath%20d='M13%2013C14.6569%2013%2016%2011.6569%2016%2010C16%208.34315%2014.6569%207%2013%207C11.3431%207%2010%208.34315%2010%2010C10%2011.6569%2011.3431%2013%2013%2013Z'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M21%2025C22.6569%2025%2024%2023.6569%2024%2022C24%2020.3431%2022.6569%2019%2021%2019C19.3431%2019%2018%2020.3431%2018%2022C18%2023.6569%2019.3431%2025%2021%2025Z'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M16%2010H27'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5%2010H10'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M24%2022H27'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5%2022H18'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_9780_3589'%3e%3crect%20width='32'%20height='32'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;background-size:contain}.samples .sample-filter__options{position:absolute;top:100%;width:100%;right:0;background-color:#ece9e7;border-radius:.8rem;clip-path:polygon(0 0,100% 0,100% 0,0 0);opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;z-index:10;margin-top:2rem;overflow:hidden;border:1px solid #c7beb8}.samples .sample-filter__options form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.samples .sample-filter__options.is-active{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}.samples .sample-filter__option{width:100%;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.samples .sample-filter__option input{display:none}.samples .sample-filter__option label{padding:2rem 4rem;width:100%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:1.6rem}.samples .sample-filter__option label:before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_9780_3597)'%3E%3Cpath d='M2.5 9L6 12.5L14 4.5' stroke='%23323232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_9780_3597'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");width:1.6rem;height:1.6rem;background-size:contain;background-repeat:no-repeat;-ms-flex-negative:0;flex-shrink:0;opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.samples .sample-filter__option.is-active{background-color:#c7beb8}.samples .sample-filter__option.is-active label:before{opacity:1}.samples__items{display:grid;grid-gap:2rem;gap:2rem}.samples .sample-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding:1.5rem;border-radius:.8rem;background-color:#fff;border:4px solid transparent;-webkit-transition:border-color .3s ease;transition:border-color .3s ease}.samples .sample-item__image{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:relative;overflow:hidden}.samples .sample-item__image img{-webkit-transition:-webkit-transform .5s cubic-bezier(.68,.85,.17,1);transition:-webkit-transform .5s cubic-bezier(.68,.85,.17,1);transition:transform .5s cubic-bezier(.68,.85,.17,1);transition:transform .5s cubic-bezier(.68,.85,.17,1),-webkit-transform .5s cubic-bezier(.68,.85,.17,1)}.samples .sample-item__image:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;-webkit-transition:.5s cubic-bezier(.68,.85,.17,1);transition:.5s cubic-bezier(.68,.85,.17,1)}.samples .sample-item__icon{position:absolute;width:6.4rem;height:auto;-webkit-transform:scale(0);transform:scale(0)}.samples .sample-item__article{color:#8d8d8d;padding-top:1rem;margin-bottom:1.6rem}.samples .sample-item__code{margin-bottom:.8rem!important;color:#a4a4a4}.samples .sample-item__title{margin-bottom:.8rem!important;color:#323232}.samples .sample-item__btn{font-family:Onest,sans-serif;display:block;padding:.9rem;width:100%;margin-top:auto;background:transparent;border:1px solid #323232;color:#323232;border-radius:100px;text-align:center;-webkit-transition:.3s cubic-bezier(.68,.85,.17,1);transition:.3s cubic-bezier(.68,.85,.17,1)}.samples .sample-item.is-added{border-color:#dad4d0}.samples .sample-item.is-added .sample-item__image:before{opacity:.5}.samples .sample-item.is-added .sample-item__icon{-webkit-transform:scale(1);transform:scale(1)}.samples .sample-item.is-added .sample-item__btn{border-color:#fb3748;color:#fb3748}.samples__pagination{padding:4rem 0 0}.samples__pagination .page-numbers{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.samples__pagination .page-numbers>li a,.samples__pagination .page-numbers>li span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:3.4rem;width:3.4rem;color:#8d8d8d;border:1px solid transparent;border-radius:.4rem;-webkit-transition:.3s ease;transition:.3s ease}.samples__pagination .page-numbers>li span.current{cursor:default;border-color:#323232;color:#323232}.samples__btn{margin-top:2rem;margin-left:auto}.js-sample-block{background-color:#fff}.js-sample{opacity:0;-webkit-transform:translateY(2rem);transform:translateY(2rem)}@media screen and (min-width: 640px){.samples__items{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1024px){.samples{padding:8rem 0}.samples__items{grid-template-columns:repeat(4,1fr);gap:6.4rem 2rem}.samples .sample-item{padding:2.4rem}}@media (hover: hover) and (pointer: fine){.samples .sample-filter__option:hover{background-color:#c7beb8}.samples .sample-item__btn:hover{background-color:#323232;color:#fff}.samples .sample-item.is-added .sample-item__btn:hover{background-color:#fb3748;color:#fff}.samples__pagination .page-numbers>li a:hover{color:#323232}}
