:root {
  --result-item-direction: row;
  --result-item-image-ratio: 1 / 1;
}

.list-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(320px - var(--number-space-3)), 1fr));
  gap: var(--number-space-3);
}
.list-result--list-view {
  grid-template-columns: 1fr;
}
.list-result--header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--number-space-4) var(--number-space-0) var(--number-space-3);
  gap: 1rem 2rem;
}
.list-result--header-text--value {
  font-family: var(--font-family-bold);
}
.list-result-usp .result-info--item-icon {
  min-width: 2rem;
}
@media (min-width: 1200px) {
  .list-result--header {
    padding: var(--number-space-2) var(--number-space-0) var(--number-space-3);
  }
}

.result--item {
  display: flex;
  flex-direction: row;
  padding: var(--number-space-3);
  overflow: hidden;
  gap: var(--number-space-3);
  border: 1px solid var(--color-static-background-light-neutral);
  border-radius: var(--number-corner-2);
  background: var(--color-static-background-light-primary);
  transition: var(--transition-default);
  /* Result item hover animation */
  /* Result item hover animation in slider */
  /* For list view and everything which is not a card */
}
.result--item__animation:hover {
  transform: scale(1.01);
  border-color: var(--color-static-background-dark-primary);
  box-shadow: var(--shadow-10);
}
.swiper-result .result--item__animation:hover {
  box-shadow: var(--shadow-10);
}

.result--item__card {
  --result-item-direction: column;
  --result-item-image-ratio: 3 / 2;
  flex-direction: column;
  padding: 0;
  padding-bottom: calc(var(--number-space-3) + var(--number-space-1));
  gap: 1rem;
}
.result--item__card .result--item-top .image-wrapper {
  width: auto;
  height: auto;
  overflow: visible;
}
.result--item__card .result--item-bottom {
  grid-template-columns: 1fr;
  padding: 0px var(--number-space-3);
}
.result--item__card .result--item-header {
  gap: var(--number-space-3);
}
.result--item__card .result--item-numbers {
  flex-direction: row;
}
.result--item__card [data-hidden-in-card-view] {
  display: none;
  visibility: collapse;
}
.result--item:not(.result--item__card) [data-hidden-in-list-view] {
  display: none;
  visibility: collapse;
}
@media (min-width: 992px) {
  .result--item:not(.result--item__card) .result--item-top {
    width: 45%;
  }
}
@media (min-width: 1200px) {
  .result--item:not(.result--item__card) .result--item-top {
    width: 42.5%;
  }
}
@media (min-width: 1400px) {
  .result--item:not(.result--item__card) .result--item-top {
    width: 45%;
  }
}
.result--item-top {
  --result-item-image-ratio: auto;
  position: relative;
  flex: 1 0 auto;
}
.result--item-top a {
  display: flex;
  height: 100%;
}
.result--item-top .image-wrapper {
  display: flex;
  aspect-ratio: var(--result-item-image-ratio);
  width: 100%;
  height: 100%;
  overflow: clip;
  border-radius: var(--number-corner-1);
}
.result--item-bottom {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0px;
  gap: var(--number-space-2);
}
.result--item-overlay-wrapper {
  display: flex;
  z-index: var(--z-2);
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
}
.result--item-header {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-2);
}
.result--item-header h3 {
  margin: 0px;
  padding-right: var(--number-space-3);
}
.result--item-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.result--item-description {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-3);
}
.result--item-numbers {
  display: flex;
  flex-direction: column;
  place-content: space-between;
  place-items: flex-end;
}
.result--item-numbers .price-wrapper {
  text-align: right;
}
.result--item-numbers .price--format > span {
  font-size: var(--font-size-h3);
  line-height: 1;
  font-family: var(--font-headline);
  font-weight: 600;
}
.result--item-cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-2);
}