:root {
  /* settings */
  --listing-max-width: 500px;
  --listing-height: 585px;
  --listing-text-height: 240px;
  --listing-border-size: 4px;
  --listing-border-radius: 40px;

  /* sized to current content */
  --listing-height: 550px;
  --listing-text-height: 125px;

  /* overwrite error text color */
  --color-error-text: #000;
}

.category-background {
  /*background-color: var(--color-cadetblue-100);*/
  background-color: var(--color-lightgray);
  padding: 90px calc(90px / 4 + 5vw / 4 * 3);
}
.category-title {
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
}
.category-title-icon {
  display: inline-block;
  margin-bottom: 4px;
  width: 97px;
  object-fit: cover;
}
.category-title-txt {
  display: inline-block;
  font-size: var(--font-size-7xl);
  letter-spacing: 0.13px;
  width: fit-content;
  height: fit-content;
}
.category-title-txt > *:first-child {
  margin-bottom: -10px;
  font-size: var(--font-size-49xl);
  font-family: var(--font-impact);
  letter-spacing: 1.02px;
}
.spacer-line{
  border-top: 3px solid var(--color-white);
  box-sizing: border-box;
  height: 3px;
  width: 614.18px;
  margin: auto;
  margin-top: 10px;
}
.category-body{
  width: 100%;
  max-width: calc(500px * 3 + 22px * 2); /* 3 columns => 3 items + 2 gaps */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  /*margin-top: 60px;*/
  margin-bottom: 0px;
}

.category-listing{
  cursor: pointer;
  max-width: var(--listing-max-width);
  height: var(--listing-height);
  border-radius: var(--listing-border-radius);
  box-shadow: 0 3px 6px var(--color-black-shadow);
  background-color: var(--color-dimgray);
}
.listing-image{
  object-fit: cover;
  display: block;
  width: 100%;
  height: calc(100% - var(--listing-text-height) - var(--listing-border-size));
  border-radius: var(--listing-border-radius) var(--listing-border-radius) 0 0;
  border: var(--listing-border-size) solid var(--color-white);
  margin-left: calc(0px - var(--listing-border-size));
  margin-top: calc(0px - var(--listing-border-size));
}
.listing-data {
  /*background-color: var(--color-cadetblue-400);*/
  position: relative;
  background-color: var(--color-cadetblue-200);
  display: block;
  width: 100%;
  height: var(--listing-text-height);
  border-radius: 0 0 var(--listing-border-radius) var(--listing-border-radius);
  border: var(--listing-border-size) solid var(--color-white);
  margin-left: calc(0px - var(--listing-border-size));
  margin-top: calc(0px - var(--listing-border-size));
}

.listing-data-left {
  display: block;
  float: left;
  max-height: calc(100% - var(--listing-border-radius) / 2);
  max-width: calc(60% - var(--listing-border-radius));
  width:fit-content;
  margin-top: calc(var(--listing-border-radius) / 2);
  margin-left: var(--listing-border-radius);
  font-size: var(--font-size-4xl);
  /*
  position: absolute;
  top: 12px;
  left: 0px;
  */
}
.listing-data-right {
  display: block;
  float: right;
  max-height: calc(100% - var(--listing-border-radius) / 2);
  width:fit-content;
  margin-top: calc(var(--listing-border-radius) / 2);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  font-size: var(--font-size-lg);
  max-width: calc(30% - 30px);
  margin-top: 20px;
  margin-right: 30px;
  text-align: right;
  /*
  position: absolute;
  top: 26px;
  right: 0px;
  max-width: unset;
  */
}
.listing-data-right > * {
  float: left;
  width: fit-content;
  margin-bottom: 3px;
  margin-right: 4px;
  margin-top: 0px;
}
.listing-data-right > .size {
  float: left;
}
.listing-data-right > .price {
  float: right;
}
.listing-data-right > .line {
  float: right;
  width: calc(100% + 8px);
  margin-right: -2px;
  height: 2px;
  background-color: white;
}
.listing-title {
  font-weight: bold;
  letter-spacing: 0.3px;
  /* font-family: var(--font-impact); */
}
.listing-address {
  /*font-size: var(--font-size-sm);*/
  font-size: var(--font-size-lg);
  line-height: 20px;
  margin-top: 7px;
  margin-left: 2px;
}

.listing-categories{
  display: block;
  float: right;
  max-height: calc(100% - var(--listing-border-radius) / 2);
  /*max-width: 350px;*/
  width: calc(40% - var(--listing-border-radius));
  margin-top: calc(var(--listing-border-radius) / 2);
  margin-right: var(--listing-border-radius);
}
.listing-categories > div {
  margin-top: -4px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}
.listing-categories > div > *{
  display: block;
  letter-spacing: 0.3px;
  font-size: var(--font-size-xl);
  line-height: 20px;
  width: fit-content;
  padding: 6px 8px;
  padding-bottom: 9px;
  margin-left: 7px;
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: var(--color-darkslategray-190);
}

.listing-availability{
  float: right;
  max-height: calc(100% - var(--listing-border-radius) / 2);
  letter-spacing: 0.3px;
  font-size: var(--font-size-xl);
  line-height: 20px;
  width: fit-content;
  padding: 6px 8px;
  padding-bottom: 9px;
  margin-left: auto;
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: var(--color-darkslategray-190);
}

.listing-availability.available{
  color: white;
  background-color: rgb(0, 168, 0);
}

.listing-availability.unavailable{
  color: white;
  background-color: rgb(184, 0, 0);
}

/* // moving categories into image // */
.listing-data-left{
  margin: 2px 24px;
  max-width: calc(70% - 48px);
}
.listing-categories{
  width: calc(100% - var(--listing-border-radius) + 6px);
  margin: calc(var(--listing-border-radius) / 2 - 3px);
  margin-top: -106px;
  height: 100px;
  position: relative;
}
.listing-categories > div {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
}
.listing-categories > div > *{
  float: right;
}

.listing-availability{
  margin: calc(var(--listing-border-radius) / 2 - 3px);
  margin-top: -400px;
}


/* ##### resposive design ##### */
/* official support until 300px */

/* ---------------------------- */

@media screen and (max-width: 1700px) {
  :root{
    --listing-height: 580px;
    --listing-text-height: 155px;
  }
  .listing-data-left{
    width: calc(100% - 48px);
    max-width: unset;
  }
  .listing-data-right {
    width: calc(100% - 48px);
    max-width: unset;
    margin: 9px 24px;
    display: block;
    position: absolute;
    bottom: 13.5px;
  }
  .listing-data-right > .line {
    display: none;
  }
}
@media screen and (max-width: 1400px) {
  :root{
    --listing-height: 550px;
    --listing-text-height: 125px;
  }
  .listing-data-left{
    max-width: calc(70% - 48px);
  }
  .listing-data-right {
    max-width: calc(30% - 30px);
    display: flex;
    position: unset;
    margin: unset;
    margin-top: 20px;
    margin-right: 30px;
  }
  .listing-data-right > .line {
    display: block;
  }
  .category-background {
    padding: 90px calc(75px / 8 + 5.35vw / 8 * 7);
  }
  .category-body{
    max-width: calc(500px * 2 + 22px * 1); /* 2 columns => 2 items + 1 gaps */
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 1150px) {
  :root{
    --listing-height: 580px;
    --listing-text-height: 155px;
  }
  .listing-data-left{
    width: calc(100% - 48px);
    max-width: unset;
  }
  .listing-data-right {
    width: calc(100% - 48px);
    max-width: unset;
    margin: 9px 24px;
    display: block;
    position: absolute;
    bottom: 13.5px;
  }
  .listing-data-right > .line {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  :root{
    --listing-height: 550px;
    --listing-text-height: 125px;
  }
  .listing-data-left{
    max-width: calc(70% - 48px);
  }
  .listing-data-right {
    max-width: calc(30% - 30px);
    display: flex;
    position: unset;
    margin: unset;
    margin-top: 20px;
    margin-right: 30px;
  }
  .listing-data-right > .line {
    display: block;
  }
  .category-background {
    padding: 90px calc(75px / 8 + 5.35vw / 8 * 7);
  }
  .category-body{
    max-width: calc(500px * 1 + 22px * 0); /* 1 columns => 1 items + 0 gaps */
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 560px) {
  :root{
    --listing-height: 580px;
    --listing-text-height: 155px;
  }
  .listing-data-left{
    width: calc(100% - 48px);
    max-width: unset;
  }
  .listing-data-right {
    width: calc(100% - 48px);
    max-width: unset;
    margin: 9px 24px;
    display: block;
    position: absolute;
    bottom: 13.5px;
  }
  .listing-data-right > .line {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .category-background {
    padding: 90px 6.55vw;
  }
  :root {
    /* settings */
    --listing-gap: 6vw;
    --listing-border-radius: 8vw;
    --listing-height: calc(75vw + 175px);
  }
  .listing-availability{
    margin-top: calc(0px - 75vw);
  }
}
@media screen and (max-width: 380px) {
  :root{
    --listing-height: calc(75vw + 195px);
    --listing-text-height: 175px;
  }
}
@media screen and (max-width: 320px) {
  :root{
    --listing-height: calc(75vw + 215px);
    --listing-text-height: 195px;
  }
}

/*
.listing-data-left{
  margin: 2px 24px;
  width: auto;
  margin-top: 2px;
}
.listing-categories{
  width: calc(100% - var(--listing-border-radius) + 6px);
  margin: calc(var(--listing-border-radius) / 2 - 3px);
  margin-top: -106px;
  height: 100px;
  position: relative;
}
.listing-categories > div {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
}
.listing-categories > div > *{
  display: inline-block;
}
*/

/*
.listing-data-left{
  margin: 2px 24px;
  width: auto;
  margin-top: 2px;
}
.listing-categories{
  width: auto;
  margin: calc(var(--listing-border-radius) / 2 - 3px);
  margin-bottom: 0px;
}
.listing-categories > div > *{
  display: inline-block;
}
*/