.projects{flex-direction:column;justify-content:center;align-items:center;width:100%;height:auto;display:flex}.projects .projectTitle{text-align:center;margin:10px 0;font-weight:bolder}.projectList{grid-template-columns:repeat(auto-fit,23%);justify-content:center;place-items:center;gap:40px;width:85vw;height:auto;transition:all .8s;display:grid}.projectItemLink{height:100%}.projectItem{width:350px;height:100%;box-shadow:0px 3px 15px var(--border-color);background-color:var(--card-bg-color);text-align:center;border-radius:15px;flex-direction:column;justify-content:space-between;padding:0 0 10px;transition:all .8s;display:flex}.projectItem:hover{box-shadow:0px 0px 20px color-mix(in srgb,var(--border-color),var(--accent-color)20%);cursor:pointer;transition:all .3s ease-in}.projectItem .bgImage{background-position:50%;background-repeat:no-repeat;background-size:cover;border-top-left-radius:15px;border-top-right-radius:15px;width:100%;height:200px}.projectItem h1{margin:10px 0;padding:10px 0 2px;font-size:18px;transition:all .8s}.projectItem .projectProgressCircle{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.projectItem.loading .projectProgressCircle{display:flex}@media only screen and (max-width:1920px){.projectList{width:90vw;transition:all .8s}}@media only screen and (max-width:1800px){.projectList{width:96vw;transition:all .8s}.projectItem h1{font-size:17px;transition:all .8s}.projectItem{width:330px}}@media only screen and (max-width:1650px){.projectList{grid-template-columns:repeat(auto-fit,30%);width:85vw;transition:all .8s}.projectItem{width:350px;transition:all .8s}}@media only screen and (max-width:1400px){.projectList{width:96vw;transition:all .8s}.projectItem h1{font-size:17px;transition:all .8s}.projectItem{width:330px}}@media only screen and (max-width:1200px){.projectList{grid-template-columns:repeat(auto-fit,48%);width:80vw;transition:all .8s}.projectItem{width:350px;transition:all .8s}}@media only screen and (max-width:950px){.projectList{width:100%}.projectItem{width:330px;transition:all .8s}}@media only screen and (max-width:800px){.projectList{grid-template-columns:1fr;width:100%}.projectItem{width:350px;transition:all .8s}}@media only screen and (max-width:450px){.projectItem h1{font-size:16px;transition:all .8s}.projectItem{width:320px;transition:all .8s}}@media only screen and (max-width:400px){.projectItem{width:300px;transition:all .8s}}