:root {
  --result-item-image-ratio: 3 / 2;
}

.list-category {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--number-space-3);
}

.category--item {
  display: flex;
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--number-corner-2);
}
.category--item:hover .image-wrapper {
  transform: scale(1.05);
}
.category--item:hover .image-wrapper::before {
  background: linear-gradient(180deg, rgba(33, 69, 120, 0.5) 50%, rgba(33, 69, 120, 0.85) 100%);
}
.category--item__small {
  aspect-ratio: 1.65;
}
.category--item .image-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;
}
.category--item .image-wrapper::before {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-gradient-blue);
  content: "";
}
.category--item .text-wrapper {
  display: flex;
  z-index: 1;
  flex-direction: column;
  place-content: flex-end;
  width: 100%;
  padding: var(--number-space-3) var(--number-space-4);
}
.category--item .text-wrapper > * {
  margin: unset;
  color: white;
}

:root {
  --usp-padding: var(--number-space-4);
}

.list-usp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--number-space-5) var(--number-space-3);
}
.list-usp .usp--item {
  --icon-p: 0.5rem;
  position: relative;
  padding: var(--usp-padding);
  padding-top: var(--number-space-5);
  border: 1px solid var(--color-static-background-light-variant-30);
  border-radius: 10px;
  box-shadow: var(--shadow-10);
}
.list-usp .usp--item h4 {
  margin-bottom: var(--number-space-1);
  font-size: var(--font-size-big);
  line-height: var(--text-line-height-default);
  font-family: var(--font-family-bold);
}
.list-usp .usp--item .icon-round {
  position: absolute;
  top: 0;
  left: var(--usp-padding);
  transform: translateY(-50%);
}