﻿.resultGrid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
}

.resultsWrapper {
  overflow: hidden;
}

.resultBlock {
  border: 1px solid var(--main-color);
  margin-bottom: 15px;
  padding:10px;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: auto auto;  
  grid-template-areas:
    "image details"
    ". bottom";  
  /*transform:rotateY(90deg);*/
  transform:translateX(100px);
  opacity: 0;
  transition:250ms;
}
  .resultBlock.show {
    /*transform: rotateY(0);*/
    transform:translateX(0);
    opacity: 1;
  }

  .resultBlock a.image {
    display: block;
    grid-area: image;
  }

    .resultBlock a.image img {
      height: 180px;
      width: 240px;
      margin: 0;
      object-fit: contain;
      object-position: 50% 50%;
      /*border:1px solid #CDCDCD;*/
    }

  .resultBlock .details {
    grid-area: details;
    display: block;
    position: relative;
    padding: 0 20px;
    width: 100%;
  }

    .resultBlock .details .properties {
      display: block;   
      white-space:normal;
    }

    .resultBlock .details .properties span {
      display: inline-block;
      padding: 3px 5px;
      margin: 0 5px 5px 0;
      background-color: #F3F3F3;
      border-radius: 3px;
      font-size: 0.8em;
    }

  .resultBlock .bottom {
    grid-area: bottom;
  }

@media (min-width:768px) {
  .resultBlock {
    max-height: 255px;
  }

    .resultBlock .bottom { 
      margin-top: -20px;
      padding: 0 5px 0 20px;
    }
}

@media (max-width:767px) {
  .staenderAction {
    margin:2px;
  }
  .resultBlock {
    padding:5px;
    grid-template-areas:
      "image details"
      "bottom bottom";
  }

    .resultBlock a.image img {
      width: 100px;
      height:auto;
      margin:5px;
    }

  .resultBlock .details {
    padding: 5px 5px 5px 0;
    position: relative;
    font-size:0.8em;
    line-height:1em;
  }
    .resultBlock .details .properties {
      display: block;
      white-space:nowrap;
      overflow:hidden;
      margin-bottom:10px;
    }

    .resultBlock .image {
      grid-area: image;
    }

    .resultBlock .bottom {
      grid-area: bottom;
      width: 100%;
      font-size: 0.8em;
    }

    .resultBlock .details {
      grid-area: details;
    }
}

@media (max-width: 987px) {
  .body-content {
    position: relative;
  }

  .detBtnWrapper {
    background-color: #FFF;
    padding: 6px 0;
    width: 100%;
  }

  .resultGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* Filter */
.boxed .flexbox {
  flex-wrap: wrap;
}

.boxed .flexbox label {
  font-size:0.8em;
}

  .boxed .flexbox .flexitem {
    flex-basis:auto;
  }

    .boxed .flexbox .flexitem select, .boxed .flexbox .flexitem input {
      width: 100%;
    }
    .boxed .flexbox .flexitem input[type=radio] {
      width: auto;
    }

.searchButtonWrapper {
  float:initial;
  margin-bottom:10px;
}

