.folder-skills {
  min-height: 300px;
  border-top: 0;
}

.skills .folder-category {
  min-height: 300px;
  padding: 16px 16px 20px;
  position: relative;
  border-right: 0;
}

.folder-category > b {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
}

.folder-category > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
}

.folder-ui {
  width: min(210px, 88%);
  height: 132px;
  margin: 28px auto 8px;
  position: relative;
  display: block;
  perspective: 700px;
}

.folder-ui::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 91px;
  border: 0;
  border-radius: 5px;
  background: #3858da;
  box-shadow: 0 12px 26px rgba(56,88,218,.18);
}

.folder-ui::after {
  content: "";
  width: 44%;
  height: 28px;
  position: absolute;
  left: 0;
  top: 21px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: #3858da;
}

.folder-ui i {
  width: 76%;
  height: 82px;
  position: absolute;
  left: 12%;
  bottom: 18px;
  border: 0;
  border-radius: 4px 4px 2px 2px;
  background: #b8c5ff;
  transform-origin: center bottom;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.folder-ui i:nth-child(1) { transform: translateY(-2px) rotate(-2deg); }
.folder-ui i:nth-child(2) { transform: translateY(2px) rotate(2deg); }
.folder-ui i:nth-child(3) { transform: translateY(6px); }

.folder-ui strong {
  position: absolute;
  inset: 48px 0 0;
  z-index: 3;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(165deg,#5f79ea 0%,#3858da 100%);
  transform-origin: center bottom;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}

.folder-category h3 {
  margin: 10px 0 9px;
  font: 700 clamp(22px,2vw,30px)/1.1 var(--serif);
}

.folder-category h3 span {
  color: #3858da;
  font: 500 14px sans-serif;
}

.folder-category a > p {
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.folder-category:hover .folder-ui i:nth-child(1),
.folder-category:focus-within .folder-ui i:nth-child(1) { transform: translateY(-22px) rotate(-7deg); }
.folder-category:hover .folder-ui i:nth-child(2),
.folder-category:focus-within .folder-ui i:nth-child(2) { transform: translateY(-29px) rotate(5deg); }
.folder-category:hover .folder-ui i:nth-child(3),
.folder-category:focus-within .folder-ui i:nth-child(3) { transform: translateY(-34px); }
.folder-category:hover .folder-ui strong,
.folder-category:focus-within .folder-ui strong {
  transform: perspective(500px) rotateX(-22deg) translateY(7px);
  box-shadow: 0 18px 28px rgba(8,9,11,.13);
}

@media(max-width:700px){
  .folder-skills{grid-template-columns:1fr 1fr}
  .skills .folder-category{min-height:270px;padding:14px}
  .folder-ui{width:min(160px,92%);height:112px;margin-top:30px}
  .folder-ui::before{height:76px}.folder-ui::after{top:20px;height:23px}
  .folder-ui i{height:68px}.folder-ui strong{inset:43px 0 0}
  .folder-category h3{font-size:20px}
}