@use "../../root";

.cardMainContianer {
  width: 100%;
  min-height: 400px;
  height: 100%;
  transition: 0.3s;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
  .imageContainer {
    width: 100%;
    height: 220px;
    background-color: orange;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .cardBody {
    padding: 30px;
    white-space: wrap;
    overflow: hidden;
    .price {
      color: root.$main_red;
      margin-bottom: 0px;
    }
    .dateAndName {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
  }
  &:hover {
    -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
    -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
  }
}