@keyframes fadeInAnimation{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleUpRightAnimation{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}.nowrap{white-space:nowrap}@media (min-width:1280px){.layout-toggle{display:flex}.layout-toggle__button{color:#fafbfb99;justify-content:center;align-items:center;width:2rem;height:2rem;transition:color .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.layout-toggle__button--active{color:#fafbfb}.layout-toggle__button svg{font-size:1.2rem}.layout-toggle__button:after{content:"";background-color:#fafbfbcc;width:0%;height:1px;transition:width .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:0;left:50%;transform:translate(-50%)}.layout-toggle__button:not(.layout-toggle__button--active):hover{color:#fafbfb}.layout-toggle__button:not(.layout-toggle__button--active):hover:after{width:100%}}
@keyframes fadeInAnimation{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleUpRightAnimation{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}.nowrap{white-space:nowrap}.project-card{grid-template-rows:subgrid;background-color:#010314;border:2px solid #202231;border-radius:30px;grid-row:span 5;gap:0;width:100%;max-width:440px;display:grid;overflow:hidden}.project-card:hover .project-card__thumbnail img{transform:scale(1.03)}.project-card__thumbnail{aspect-ratio:16/9;display:flex;position:relative;overflow:hidden}.project-card__thumbnail:after{content:"";background:linear-gradient(#0000,#1c183a26);position:absolute;inset:0}.project-card__thumbnail__blur{filter:blur(20px);width:100%;height:auto}.project-card__thumbnail__image{opacity:0;width:100%;height:auto;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.project-card__thumbnail__image--loaded{opacity:1}.project-card__body{grid-template-rows:subgrid;grid-row:span 4;gap:0;padding:2rem;display:grid}.project-card__body__header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.project-card__body__header__title{text-transform:uppercase;letter-spacing:.5px;font-size:20px;font-weight:400}.project-card__body__header__actions{align-items:center;display:flex}.project-card__body__header__actions a{justify-content:center;align-items:center;width:24px;height:24px;display:flex}.project-card__body__header__actions a:first-child{font-size:12px}.project-card__body__snippet{color:#fafbfbcc;letter-spacing:.4px;line-clamp:6;-webkit-line-clamp:6;-webkit-box-orient:vertical;margin-bottom:2rem;font-size:12px;line-height:20px;display:-webkit-box;overflow:hidden}.project-card__body__tags{flex-direction:column;gap:.2rem;display:flex}.project-card__body__tags__title{letter-spacing:.4px;text-transform:uppercase;font-size:12px}.project-card__body__tags>div{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.project-card__body__tags>div svg{font-size:20px;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex}.project-card__body__tags>div svg:hover{transform:translateY(-2px)}@media (min-width:1280px){.project-card--list{grid-template-rows:1fr;grid-template-columns:repeat(2,1fr);column-gap:4rem;max-width:100%;padding:2rem 4rem 0}.project-card--list:nth-child(2n){direction:rtl}.project-card--list:nth-child(2n) *{direction:ltr}.project-card--list .project-card__thumbnail{border-radius:15px 15px 0 0}.project-card--list .project-card__body{flex-direction:column;height:100%;padding-top:0;padding-right:0;display:flex}.project-card--list .project-card__body__tags{margin-top:auto}}
@keyframes fadeInAnimation{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleUpRightAnimation{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}.nowrap{white-space:nowrap}.projects-toolbar{display:none}@media (min-width:1280px){.projects-toolbar{justify-content:flex-end;width:100%;margin-bottom:1rem;display:flex}}.project-list{grid-template-columns:1fr;gap:clamp(1rem,2vw,2rem);display:grid}@media (min-width:768px){.project-list{grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px){.project-list{grid-template-columns:repeat(3,1fr)}.project-list--list{grid-template-columns:1fr;width:100%}}
