/* Colors */
/* Font Weights */
body {
  height: 100%;
}


.car-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    max-height: 3em;
    max-width: 100%;
}

.car-desc{
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    max-height: 100%;
    max-width: 100%;
}


.mobile-form {
  background: #FFFFFF;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100%;
  transition: 0.2s ease;
  z-index: 30;
  left: 0%;
  opacity: 1;
  display: grid;
  overflow-y: auto;
  grid-template-rows: auto;
  gap: 2em;
  padding: 2em 2em 8em 2em;
}
.mobile-form .car-info {
  width: 100%;
  height: 100%;
  padding-left: 2em;
  row-gap: 2em;
  display: grid;
  grid-template-columns: 90% 10%;
  grid-template-rows: auto;
  grid-template-areas: "title return" "fuel return" "km return" "price return";
  position: relative;
}
.mobile-form .car-info::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 5px;
  background: #008F70;
}

.mobile-form .car-info .car-title {
  grid-area: title;
}
.mobile-form .car-info .car-desc {
  grid-area: desc;
}
.mobile-form .car-info .car-fuel {
  grid-area: fuel;
}
.mobile-form .car-info .car-km {
  grid-area: km;
}
.mobile-form .car-info .car-price {
  grid-area: price;
}
.mobile-form .car-info .car-price p {
  font-size: 1.6rem;
  padding-bottom: 20px;
}
.mobile-form .car-info .car-price .price-container {
  display: flex;
  align-items: center;
  height: 40px;
  align-items: center;
}
.mobile-form .car-info .car-price .price-container .price-number {
  grid-area: number;
  font-size: 4.8rem;
  font-weight: 700;
  color: #008F70;
  padding-right: 10px;
}
.mobile-form .car-info .car-price .price-container .price-ct {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-form .car-info .car-price .price-container .price-ct .price-currency {
  grid-area: currency;
  font-size: 1.6rem;
  color: #008F70;
  align-self: end;
}
.mobile-form .car-info .car-price .price-container .price-ct .price-time {
  grid-area: time;
  font-size: 1rem;
  color: #008F70;
}
.mobile-form .car-info .car-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
}

.mobile-form .car-info .car-desc {
  font-size: 1.8rem;
  color: #008F70;
  text-transform: normal;
}
.mobile-form .car-info .car-fuel,
.mobile-form .car-info .car-km {
  font-size: 1.6rem;
}
.mobile-form .car-info .close-form {
  padding: 0.5em;
}
.mobile-form .car-info .close-form svg path {
  fill: #008F70;
}
.mobile-form .car-img img {
  width: 100%;
}

.mobile-form.hide {
  opacity: 0;
  left: 100%;
}

.benefit-form {
  display: grid;
  gap: 2em;
  grid-template-areas: "inputs" "protection" "terms" "button";
}
.benefit-form .input-container {
  grid-area: inputs;
  display: flex;
  flex-direction: column;
}
.benefit-form input[type=text],
.benefit-form input[type=email],
.benefit-form input[type=tel],
.benefit-form select,
.benefit-form .benefit-submit {
  width: 100%;
  height: 60px;
  font-size: 1.5rem;
  margin-bottom: 1.5em;
  padding: 1em 15% 1em 1em;
  border: 1px solid #9b9b9b;
  background: #FFFFFF;
}
.benefit-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url(../images/arrow_down_dark.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-position-x: 95%;
}
.benefit-form .benefit-submit {
  grid-area: button;
  padding: 0;
  background: #008F70;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  border: none;
}
.benefit-form label.protection {
  font-size: 1.6rem;
}
.benefit-form .terms-container {
  grid-area: terms;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  padding: 0 2px;
}
.benefit-form .terms-container input[type=checkbox] {
  width: 31px;
  height: 31px;
  padding: 0;
  margin-right: 2em;
  border-radius: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.benefit-form .terms-container input[type=checkbox]:after {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  bottom: 4px;
  right: 4px;
  position: relative;
  background-color: #FFFFFF;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 1px solid #707070;
}
.benefit-form .terms-container input[type=checkbox]:checked:after {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  bottom: 4px;
  right: 4px;
  position: relative;
  background-color: #008F70;
  content: "";
  display: inline-block;
  visibility: visible;
  border: 1px solid #707070;
  box-shadow: inset 0 0 0px 3px #FFFFFF;
}
.benefit-form .terms-container a {
  text-decoration: none;
  color: #008F70;
  font-weight: 700;
  font-size: 1.6rem;
}

.car,
.garagiste {
  display: grid;
  grid-template-rows: auto;
  gap: 2em;
  height: 100%;
  padding: 12em 2em 8em 2em;
}
.car .ariane,
.garagiste .ariane {
  display: none;
}
.car .car-info,
.garagiste .car-info {
  width: 100%;
  padding-left: 2em;
  display: grid;
  grid-template-rows: auto;
  grid-template-areas: "title" "desc"  "fuel" "km" "price";
  position: relative;
}
.car .car-info::before,
.garagiste .car-info::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 5px;
  background: #008F70;
}
.car .car-info .car-title,
.garagiste .car-info .car-title {
  grid-area: title;
  padding-bottom: 10px;
}

.car .car-info .car-desc,
.garagiste .car-info .car-desc {
  grid-area: desc;
  padding-bottom: 10px;
}

.car .car-info .car-fuel,
.garagiste .car-info .car-fuel {
  grid-area: fuel;
  padding-bottom: 5px;
}
.car .car-info .car-km,
.garagiste .car-info .car-km {
  grid-area: km;
}
.car .car-info .car-price,
.garagiste .car-info .car-price {
  grid-area: price;
  padding-top: 10px;
}
.car .car-info .car-price p,
.garagiste .car-info .car-price p {
  font-size: 1.6rem;
  padding-bottom: 15px;
}
.car .car-info .car-price .price-container,
.garagiste .car-info .car-price .price-container {
  display: flex;
  align-items: center;
  height: 45px;
}
.car .car-info .car-price .price-container .price-number,
.garagiste .car-info .car-price .price-container .price-number {
  grid-area: number;
  font-size: 4.8rem;
  font-weight: 700;
  color: #008F70;
  padding-right: 10px;
}
.car .car-info .car-price .price-container .price-ct,
.garagiste .car-info .car-price .price-container .price-ct {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.car .car-info .car-price .price-container .price-ct .price-currency,
.garagiste .car-info .car-price .price-container .price-ct .price-currency {
  grid-area: currency;
  font-size: 1.8rem;
  color: #008F70;
  align-self: end;
}
.car .car-info .car-price .price-container .price-ct .price-time,
.garagiste .car-info .car-price .price-container .price-ct .price-time {
  grid-area: time;
  font-size: 1.2rem;
  color: #008F70;
}
.car .car-info .car-title,
.garagiste .car-info .car-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #008F70;
  text-transform: uppercase;
}
.car .car-info .car-fuel,
.car .car-info .car-km,
.garagiste .car-info .car-fuel,
.garagiste .car-info .car-km {
  font-size: 1.6rem;
}
.car .car-garagiste,
.garagiste .car-garagiste {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.car .car-garagiste a,
.garagiste .car-garagiste a {
  width: 113px;
  height: 66.66px;
  display: grid;
  place-content: center;
}
.car .car-garagiste a img,
.garagiste .car-garagiste a img {
  width: 100%;
}
.car .car-img,
.garagiste .car-img {
  transition: opacity 300ms linear;
}
.car .car-img img,
.garagiste .car-img img {
  width: 100%;
}
.car .offre-indicatif,
.garagiste .offre-indicatif {
  font-size: 1.4rem;
  padding: 1em;
  align-self: center;
  color: #C4B9B9;
}
.car .car-button button,
.garagiste .car-button button {
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFFFFF;
  background: #008F70;
  border: none;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.car .car-button button .details-arrow svg path,
.garagiste .car-button button .details-arrow svg path {
  stroke: #FFFFFF;
}
.car hr,
.garagiste hr {
  border: 1px solid #dbd4d4;
  margin: 2em 0;
}
.car .car-details,
.garagiste .car-details {
  display: flex;
  flex-direction: column;
}
.car .car-details p,
.garagiste .car-details p {
  font-size: 1.6rem;
  padding-bottom: 1em;
}
.car .car-details .details-table,
.garagiste .car-details .details-table {
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  border-collapse: collapse;
}
.car .car-details .details-table thead,
.garagiste .car-details .details-table thead {
  background: #d9d9d9;
  font-weight: 700;
}
.car .car-details .details-table thead tr td,
.garagiste .car-details .details-table thead tr td {
  width: 33.33%;
  height: 50px;
}
.car .car-details .details-table tbody tr:nth-child(1),
.garagiste .car-details .details-table tbody tr:nth-child(1) {
  background: #f8f5f5;
}
.car .car-details .details-table tbody tr:nth-child(2),
.garagiste .car-details .details-table tbody tr:nth-child(2) {
  background: #e6e6e6;
}
.car .car-details .details-table tbody tr td,
.garagiste .car-details .details-table tbody tr td {
  width: 33.33%;
  height: 50px;
}
.car .car-gallery,
.garagiste .car-gallery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  width: 100%;
  overflow-x: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.car .car-gallery .arrow-right,
.car .car-gallery .arrow-left,
.garagiste .car-gallery .arrow-right,
.garagiste .car-gallery .arrow-left {
  cursor: pointer;
}
.car .car-gallery .arrow-right svg,
.car .car-gallery .arrow-left svg,
.garagiste .car-gallery .arrow-right svg,
.garagiste .car-gallery .arrow-left svg {
  border-radius: 50%;
}
.car .car-gallery .arrow-right svg .arrow,
.car .car-gallery .arrow-left svg .arrow,
.garagiste .car-gallery .arrow-right svg .arrow,
.garagiste .car-gallery .arrow-left svg .arrow {
  transition: all 200ms linear;
}
.car .car-gallery .arrow-right svg .elipse,
.car .car-gallery .arrow-left svg .elipse,
.garagiste .car-gallery .arrow-right svg .elipse,
.garagiste .car-gallery .arrow-left svg .elipse {
  transition: all 200ms linear;
}
.car .car-gallery .arrow-right.disabled,
.car .car-gallery .arrow-left.disabled,
.garagiste .car-gallery .arrow-right.disabled,
.garagiste .car-gallery .arrow-left.disabled {
  cursor: unset;
}
.car .car-gallery .arrow-right.disabled svg .arrow,
.car .car-gallery .arrow-left.disabled svg .arrow,
.garagiste .car-gallery .arrow-right.disabled svg .arrow,
.garagiste .car-gallery .arrow-left.disabled svg .arrow {
  fill: #c3c3c3;
}
.car .car-gallery .arrow-right.disabled svg .elipse,
.car .car-gallery .arrow-left.disabled svg .elipse,
.garagiste .car-gallery .arrow-right.disabled svg .elipse,
.garagiste .car-gallery .arrow-left.disabled svg .elipse {
  fill: transparent;
  stroke: #c3c3c3;
}
.car .car-gallery .thumbnails-slider,
.garagiste .car-gallery .thumbnails-slider {
  width: 100%;
  overflow: hidden;
}
.car .car-gallery .thumbnails-slider .thumbnails-container,
.garagiste .car-gallery .thumbnails-slider .thumbnails-container {
  display: flex;
  transition: all 100ms linear;
}
.car .car-gallery .thumbnails-slider .thumbnails-container img,
.garagiste .car-gallery .thumbnails-slider .thumbnails-container img {
  height: 100%;
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 200ms linear;
  flex-shrink: 0;
}
.car .car-gallery .thumbnails-slider .thumbnails-container img.mobile-img,
.garagiste .car-gallery .thumbnails-slider .thumbnails-container img.mobile-img {
  width: 33.33%;
}
.car .car-gallery .thumbnails-slider .thumbnails-container img.tablet-img,
.garagiste .car-gallery .thumbnails-slider .thumbnails-container img.tablet-img {
  width: 25%;
}
.car .car-gallery .thumbnails-slider .thumbnails-container img.desktop-img,
.garagiste .car-gallery .thumbnails-slider .thumbnails-container img.desktop-img {
  width: 20%;
}
.car .car-gallery .thumbnails-slider .thumbnails-container img.selected-img,
.garagiste .car-gallery .thumbnails-slider .thumbnails-container img.selected-img {
  opacity: 1;
}
.car .car-gallery .img-container:not(:first-child) img,
.garagiste .car-gallery .img-container:not(:first-child) img {
  opacity: 0.27;
}
.car .car-text,
.garagiste .car-text {
  font-size: 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding-top: 2em;
}
.car .car-text h4,
.garagiste .car-text h4 {
  font-weight: 700;
  padding-bottom: 2em;
}
.car .car-text p,
.garagiste .car-text p {
  line-height: 1.6;
}
.car .car-values,
.garagiste .car-values {
  text-align: center;
  display: flex;
  flex-direction: column;
  padding-top: 4em;
}
.car .car-values h4,
.garagiste .car-values h4 {
  font-size: 1.6rem;
  font-weight: 700;
  padding-bottom: 4em;
}
.car .car-values .values-container,
.garagiste .car-values .values-container {
  display: flex;
  flex-direction: column;
}
.car .car-values .values-container .value,
.garagiste .car-values .values-container .value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 4em;
}
.car .car-values .values-container .value .icon-container,
.garagiste .car-values .values-container .value .icon-container {
  width: 93px;
  height: 93px;
  display: flex;
  justify-self: center;
  justify-content: center;
  align-items: center;
}
.car .car-values .values-container .value .text-container,
.garagiste .car-values .values-container .value .text-container {
  padding-top: 2em;
  color: #008F70;
  font-size: 1.8rem;
  text-transform: uppercase;
}
.car .garagiste-img,
.garagiste .garagiste-img {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4em;
}
.car .garagiste-img img,
.garagiste .garagiste-img img {
  width: 173px;
  padding-bottom: 2em;
}
.car .garagiste-img p,
.garagiste .garagiste-img p {
  padding-top: 3em;
  font-size: 1.6rem;
  line-height: 1.6;
  width: 98%;
}

td {
  border: 0px solid #FFFFFF;
  background-clip: padding-box;
}

tr > td + td {
  border-left-width: 5px;
}

tr > td {
  border-top-width: 5px;
}

/* Media Queries */
@media only screen and (max-width: 320px) {
  .car .car-info .car-price .price-container .price-number, .mobile-form .car-info .car-price .price-container .price-number {
    font-size: 4.5rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .mobile-form .car-info {
    grid-template-columns: 95% 5%;
  }

  .car,
.garagiste {
    padding: 15em 2em 8em 2em;
  }
  .car .car-button button,
.garagiste .car-button button {
    width: 50%;
  }
}
@media only screen and (min-width: 901px) {
  .mobile-form {
    padding: 6em 6em 8em 6em;
  }
  .mobile-form .car-info {
    width: 100%;
    grid-template-columns: 93% 5%;
    padding-left: 2em;
  }
  .mobile-form .car-info .close-form svg {
    width: 100%;
    height: 100%;
  }
  .mobile-form .car-info .car-title {
    font-size: 4rem;
  }
  
  .mobile-form .car-info .car-desc {
    font-size: 1.9rem;
  }
  
  .mobile-form .car-info .car-fuel,
.mobile-form .car-info .car-km {
    font-size: 1.8rem;
  }
  .mobile-form .car-info .car-price p {
    font-size: 1.8rem;
  }
  .mobile-form .car-info .car-price .price-container {
    grid-template-columns: 130px 60px;
  }

  .benefit-form {
    gap: 4em;
  }
  .benefit-form .input-container {
    display: grid;
    gap: 2em;
    grid-template-columns: 49% 49%;
  }
  .benefit-form input,
.benefit-form select {
    font-size: 1.6rem;
  }
  .benefit-form input[type=text],
.benefit-form input[type=email],
.benefit-form input[type=tel],
.benefit-form select,
.benefit-form .benefit-submit {
    margin-bottom: 0;
  }
  .benefit-form .benefit-submit {
    width: 30%;
  }
  .benefit-form .terms-container {
    font-size: 2rem;
  }

  .car {
    padding: 22em 4em 8em 4em;
    grid-template-columns: 61% 39%;
    grid-template-areas: "img info" "img garagiste" "img indicatif" "img button" "img details-s" "gallery details" "text text" "values values";
    gap: 0;
  }
  .car .car-info {
    grid-area: info;
    padding-left: 2.5em;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .car .car-info::before {
    height: calc(100% + 190px);
    background: #008F70;
  }
  .car .car-info .car-title {
    font-size: 2.8rem;
  }
  
  .car .car-info .car-desc {
    font-size: 1.8rem;
  }
  
  .car .car-info .car-fuel,
.car .car-info .car-km,
.car .car-info .car-garage {
    font-size: 1.6rem;
  }
  .car .car-info .car-price p {
    font-size: 1.6rem;
  }
  /* .car .car-info .car-price .price-container .price-number {
    font-size: 5.6rem;
  } */
  .car .car-info .car-price .price-container .price-currency {
    font-size: 2.2rem;
  }
  .car .car-info .car-price .price-container .price-time {
    font-size: 1.4rem;
  }
  .car .car-img {
    grid-area: img;
    width: 90%;
    justify-self: center;
    align-self: center;
  }
  .car .car-garagiste {
    grid-area: garagiste;
    align-self: end;
    padding-left: 3em;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .car .offre-indicatif {
    grid-area: indicatif;
    padding-left: 3em;
  }
  .car .car-button {
    grid-area: button;
    align-self: end;
    padding-left: 3em;
  }
  .car .details-separator {
    grid-area: details-s;
  }
  .car .car-details {
    grid-area: details;
  }
  .car .car-details p {
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 10px;
  }
  .car .car-details .details-table thead tr td {
    height: 34px;
  }
  .car .car-details .details-table tbody tr td {
    height: 34px;
  }
  .car .gallery-separator {
    grid-area: gallery-s;
    height: 1px;
  }
  .car .car-gallery {
    grid-area: gallery;
  }
  .car .details-separator,
.car .car-details,
.car .gallery-separator {
    width: 92%;
    justify-self: right;
  }
  .car .car-text {
    grid-area: text;
    align-items: center;
    padding-top: 6em;
  }
  .car .car-text h4 {
    font-size: 2rem;
  }
  .car .car-text p {
    font-size: 1.6rem;
    width: 60ch;
    line-height: 1.8;
    padding-top: 2em;
  }
  .car .car-values {
    grid-area: values;
  }
  .car .car-values h4 {
    font-size: 2rem;
  }
  .car .car-values .values-container {
    flex-direction: row;
    justify-content: space-evenly;
  }
  .car .car-values .values-container .value {
    width: 180px;
  }

  .garagiste {
    padding: 20em 2em 8em 2em;
  }
  .garagiste .garagiste-img p {
    width: 80%;
  }
  .garagiste .car-values h4 {
    font-size: 2.5rem;
  }
  .garagiste .car-values .values-container {
    height: 200px;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .garagiste .car-values .values-container .value {
    width: 180px;
  }
}
@media only screen and (min-width: 1280px) {
  .mobile-form {
    grid-template-columns: 45% 54%;
    grid-template-rows: 34% 63%;
    grid-template-areas: "info form" "img form";
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .mobile-form .car-info {
    grid-area: info;
    grid-template-columns: 217% 7%;
  }
  .mobile-form .car-info .close-form {
    cursor: pointer;
  }
  .mobile-form .car-img {
    grid-area: img;
  }

  .benefit-form {
    height: 50%;
    grid-area: form;
    align-self: center;
  }
  .benefit-form .terms-container input[type=checkbox] {
    cursor: pointer;
  }
  .benefit-form .benefit-submit {
    cursor: pointer;
    transition: all 300ms linear;
  }
  .benefit-form .benefit-submit:hover {
    background: #1F1F1F;
    transition: all 300ms linear;
  }

  .car {
    padding: 20em 4em 18em 4em;
    grid-template-columns: 61% 39%;
  }
  .car .car-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 40px;
  }
  .car .car-info .car-title {
    padding-bottom: 30px;
  }
  .car .car-info .car-desc {
    padding-bottom: 15px;
  }
  .car .car-info .car-fuel {
    padding-bottom: 15px;
  }
  .car .car-info .car-price {
    padding-top: 30px;
  }
  .car .car-info .car-fuel, .car .car-info .car-km, .car .car-info .car-price {
    width: 40%;
  }
  .car .car-garagiste {
    padding-left: 40px;
  }
  .car .car-garagiste img {
    display: block;
  }
  .car .car-img {
    width: 70%;
  }
  .car .car-button {
    padding-bottom: 20px;
    padding-left: 40px;
  }
  .car .car-button button {
    width: 300px;
    cursor: pointer;
    transition: all 300ms linear;
  }
  .car .car-button button:hover {
    background: #1F1F1F;
    transition: all 300ms linear;
  }
  .car .car-text p {
    width: 100ch;
  }
  .car .car-details {
    padding-left: 40px;
    width: 100%;
  }
  .car .car-details .details-table {
    width: 300px;
  }
  .car .car-gallery {
    width: 100%;
  }
  .car .car-gallery .arrow-right:hover svg .arrow,
.car .car-gallery .arrow-left:hover svg .arrow {
    fill: #FFFFFF;
    transition: all 200ms linear;
  }
  .car .car-gallery .arrow-right:hover svg .elipse,
.car .car-gallery .arrow-left:hover svg .elipse {
    transition: all 200ms linear;
    fill: #008F70;
    stroke: transparent;
  }
  .car .car-gallery .arrow-right.disabled:hover svg .arrow,
.car .car-gallery .arrow-left.disabled:hover svg .arrow {
    fill: #c3c3c3;
  }
  .car .car-gallery .arrow-right.disabled:hover svg .elipse,
.car .car-gallery .arrow-left.disabled:hover svg .elipse {
    fill: transparent;
    stroke: #c3c3c3;
  }
  .car .car-gallery .thumbnails-slider .thumbnails-container img:hover {
    opacity: 1;
    transition: opacity 200ms linear;
  }
  .car .details-separator {
    width: 65%;
    margin-left: 40px;
    justify-self: unset;
  }
  .car .gallery-separator {
    width: 100%;
    margin-left: 40px;
    justify-self: unset;
  }

  .garagiste {
    padding: 20em 10em 18em 10em;
    gap: 5em;
  }
}
@media only screen and (max-width: 1539px) and (min-width: 1280px) {
  .mobile-form .car-info {
    grid-template-columns: 221% 7%;
    height: 116%;
  }
  .mobile-form .car-info .car-title {
    font-size: 3rem;
  }
  
  .mobile-form .car-info .car-title {
    font-size: 1.8rem;
  }
  
  .mobile-form .car-info .car-price .price-container {
    grid-template-columns: 95px 60px;
  }
  .mobile-form .car-info .car-price .price-container .price-number {
    font-size: 3.8rem;
  }
  .mobile-form .car-info .car-price .price-container .price-currency {
    font-size: 1.4rem;
  }
  .mobile-form .car-info .car-price .price-container .price-time {
    font-size: 1.2rem;
  }

  .benefit-form {
    height: 70%;
  }
  .benefit-form .terms-container {
    font-size: 1.8rem;
  }

  .car,
.garagiste {
    padding: 16em 4em 18em 4em;
  }
  .car .car-info .car-title,
.garagiste .car-info .car-title {
    padding-bottom: 10px;
  }
  
 .car .car-info .car-desc,
 .garagiste .car-info .car-desc {
    padding-bottom: 10px;
  }
  
  .car .car-info .car-fuel,
.garagiste .car-info .car-fuel {
    padding-bottom: 5px;
  }
  .car .car-info .car-price,
.garagiste .car-info .car-price {
    padding-top: 10px;
  }
  .car .car-details p,
.garagiste .car-details p {
    padding-bottom: 10px;
  }
  .car .car-button,
.garagiste .car-button {
    padding-bottom: 0px;
  }
  .car .car-gallery,
.garagiste .car-gallery {
    margin-bottom: 50px;
  }
  .car .car-values h4,
.garagiste .car-values h4 {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 1920px) {
  .car .car-img {
    width: 60%;
  }
}
@media only screen and (min-width: 2000px) {
  .car .car-img {
    width: 50%;
  }
}/*# sourceMappingURL=details.css.map */