.types {
  background: var(--light-bg);
}
.types__top {
  width: 100%;
  max-width: 680px;
}
.types__label {
  margin-bottom: clamp(10px, 2.5vw, 20px);
}
.types__subtitle {
  margin-top: clamp(15px, 2.5vw, 20px);
  color: var(--dark-gray);
}
.types__cards {
  margin-top: clamp(25px, 4.5vw, 50px);
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(15px, 3.5vw, 25px);
}
.types__card {
  padding: clamp(20px, 4vw, 32px);
  border-radius: 20px;
  border: 1px solid var(--super-light-gray);
  background: var(--white);
  -webkit-box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.types__icon {
  margin-bottom: clamp(15px, 3vw, 30px);
  width: clamp(40px, 7vw, 56px);
  height: clamp(40px, 7vw, 56px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 6px;
  background: var(--light-bg);
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.types__icon svg {
  width: clamp(20px, 4vw, 28px);
}
.types__icon svg path {
  -webkit-transition: stroke 0.5s;
  transition: stroke 0.5s;
}
.types__text {
  margin-top: clamp(10px, 3vw, 15px);
  color: var(--dark-gray);
}

@media (max-width: 500px) {
  .types__cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
@media (min-width: 1024px) {
  .types__card:hover {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  .types__card:hover .types__icon {
    background: var(--orange);
  }
  .types__card:hover .types__icon svg path {
    stroke: var(--white);
  }
}