.content-cards {
  margin: .5rem 0;
}
@media (max-width: 800px) {
  .content-cards {
    margin: .5rem 0;
  }
}
.content-cards .card-row {
  flex-wrap: wrap;
  gap: 24px;
}
@media (max-width: 800px) {
  .content-cards .card-row {
    /* gap: calc(24px * 0.67); */
  }
}
.content-cards .col-50 {
  width: calc(50% - 24px * 1 / 2);
}
@media (min-width: 801px) {
  .content-cards .col-md-33 {
    width: calc(33.33% - 24px * 2 / 3);
  }
}

.content-card {
  margin-bottom: 8px;
}
.content-card .card-img {
  position: relative;
  border-radius: 8px;
  border: 1px solid #F2F4F6;
  aspect-ratio: 4/3;
  margin-bottom: 8px;
}
.content-card .card-img img {
  scale: 1;
  transition: scale 0.3s ease;
}
.content-card:hover .card-img img {
  scale: 1.05;
  transition: scale 0.3s ease;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #333333;
  width: 100%;
  height: auto;
}
.card-info .card-title {
  white-space: nowrap; /* 設為不折行才能超出父層容器 */
  overflow: hidden; /* 將超出部分隱藏 */
  text-overflow: ellipsis; /* 再將超出文字設為省略符號 */
  margin-bottom: 0px;
}

.card-difficulty {
  color: #757575;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-difficulty .difficulty-rates {
  display: flex;
  align-items: center;
}
.card-difficulty .difficulty-rate {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_215_709)'><path d='M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2ZM14.565 16.26C14.565 17.59 13.485 18.665 12.16 18.665H11.845C10.515 18.665 9.44 17.585 9.44 16.26V16.105H14.57V16.26H14.565ZM14.565 14.565H9.435C9.435 13.425 7.385 12.4 7.385 9.95C7.385 7.5 9.45 5.335 12 5.335C14.55 5.335 16.615 7.4 16.615 9.95C16.615 12.5 14.565 13.43 14.565 14.565Z' fill='%23F2F4F6'/><path d='M12 7.33501C10.56 7.33501 9.38501 8.51001 9.38501 9.95001C9.38501 10.695 9.73001 11.185 10.29 11.925C10.44 12.125 10.605 12.335 10.755 12.565H13.245C13.4 12.335 13.56 12.12 13.71 11.925C14.27 11.185 14.615 10.695 14.615 9.95001C14.615 8.51001 13.44 7.33501 12 7.33501Z' fill='%23F2F4F6'/></g><defs><clipPath id='clip0_215_709'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>");
}
.card-difficulty .difficulty-rate.rated {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_215_709)'><path d='M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2ZM14.565 16.26C14.565 17.59 13.485 18.665 12.16 18.665H11.845C10.515 18.665 9.44 17.585 9.44 16.26V16.105H14.57V16.26H14.565ZM14.565 14.565H9.435C9.435 13.425 7.385 12.4 7.385 9.95C7.385 7.5 9.45 5.335 12 5.335C14.55 5.335 16.615 7.4 16.615 9.95C16.615 12.5 14.565 13.43 14.565 14.565Z' fill='%23D93636'/><path d='M12 7.33501C10.56 7.33501 9.38501 8.51001 9.38501 9.95001C9.38501 10.695 9.73001 11.185 10.29 11.925C10.44 12.125 10.605 12.335 10.755 12.565H13.245C13.4 12.335 13.56 12.12 13.71 11.925C14.27 11.185 14.615 10.695 14.615 9.95001C14.615 8.51001 13.44 7.33501 12 7.33501Z' fill='%23D93636'/></g><defs><clipPath id='clip0_215_709'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>");
}

.card-creator {
  width: 100%;
  height: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.card-creator .creator-head-img {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-block;
  background-color: #F2F4F6;
  border-radius: 50%;
  border: 1px solid #F2F4F6;
  line-height: 1;
}
.card-creator .creator-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
}
@media (max-width: 800px) {
  .card-creator .creator-name {
    font-size: 0.75rem;
  }
}

.card-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-block;
}
.card-icon[data-card-icon=location] {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.4 2C7.88 2 4.2 5.68 4.2 10.2C4.2 15.54 11.46 21.525 11.77 21.775C11.955 21.925 12.18 22 12.4 22C12.62 22 12.85 21.925 13.03 21.775C13.34 21.525 20.6 15.54 20.6 10.2C20.6 5.68 16.92 2 12.4 2ZM12.4 19.685C10.22 17.745 6.2 13.49 6.2 10.2C6.2 6.91 8.98 4 12.4 4C15.82 4 18.6 6.78 18.6 10.2C18.6 13.62 14.58 17.745 12.4 19.685ZM12.4 6C10.195 6 8.4 7.795 8.4 10C8.4 12.205 10.195 14 12.4 14C14.605 14 16.4 12.205 16.4 10C16.4 7.795 14.605 6 12.4 6ZM12.4 12C11.295 12 10.4 11.105 10.4 10C10.4 8.895 11.295 8 12.4 8C13.505 8 14.4 8.895 14.4 10C14.4 11.105 13.505 12 12.4 12Z' fill='%23333333'/></svg>");
}
.card-icon[data-card-icon=star] {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 18.12L7.47999 20.495C6.77499 20.865 5.94999 20.265 6.08499 19.48L6.94999 14.45L3.29499 10.885C2.72499 10.33 3.03999 9.36 3.82999 9.245L8.87999 8.51L11.14 3.93C11.495 3.215 12.515 3.215 12.865 3.93L15.125 8.51L20.175 9.245C20.965 9.36 21.28 10.33 20.71 10.885L17.055 14.45L17.92 19.48C18.055 20.265 17.23 20.865 16.525 20.495L12.005 18.12H12Z' fill='%232CA6E0'/></svg>");
}

.card-location {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 100%;
  height: auto;
}
.card-location .location-name {
  color: #757575;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
}
@media (max-width: 800px) {
  .card-location .location-name {
    font-size: 0.75rem;
  }
}

.card-num-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-num-wrapper .card-rate {
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-num-wrapper .rate-avg {
  letter-spacing: 0.04rem;
}
.card-num-wrapper .rate-quantity {
  color: #757575;
  letter-spacing: 0.04rem;
  font-size: 0.875rem;
}
@media (max-width: 800px) {
  .card-num-wrapper {
	display: block;
	/* justify-content: space-between; */
	/* align-items: center; */
  }
  .card-num-wrapper .rate-quantity {
    font-size: 0.75rem;
  }
}
.card-num-wrapper .card-price {
  font-family: "Roboto", "Microsoft JhengHei", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04rem;
}
@media (max-width: 800px) {
  .card-num-wrapper .card-price {
    font-size: 0.875rem;
    letter-spacing: 0.035rem;
  }
}

.card-rank {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: "Roboto", "Microsoft JhengHei", Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 0px 0 8px 0;
  z-index: 2;
}
.card-rank.gold {
  background: linear-gradient(to right, #ffe762 0%, #D48A16 100%);
}
.card-rank.silver {
  background: linear-gradient(to right, #EAEEF9 0%, #7C83A0 100%);
}
.card-rank.copper {
  background: linear-gradient(to right, #F3CBC3 0%, #7F1E00 100%);
}

@media (max-width: 800px) {
  .card-rank {
    font-size: 1rem;
  }
}
.card-device {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4px 8px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: "Roboto", "Microsoft JhengHei", Helvetica, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0px 8px 0px 0;
  z-index: 2;
}
@media (max-width: 800px) {
  .card-device {
    font-size: 0.75rem;
  }
}

.view-content-card-favorite{
  display: inline-block;
  -webkit-appearance: button;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  background: #fffc;
  padding: 4px 6px;
  border-radius: 6px;

  cursor: pointer;
  transition: transform .4s ease, color .4s ease;
  color: #000;
  text-align: center;
}

.view-content-card-favorite.block{
  display: block;
  width: 100%;
}

.view-content-card-favorite:focus{
  outline: none;
}

.view-content-card-favorite.active{
  border-color: #dc3545;
  color: #dc3545;
  background: #fff;
}

.view-content-card-favorite.incardpos{
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  border-color: transparent;
}

.view-content-card-favorite.incardpos.active{
  transform: translate(-3px, -3px);
  border-color: transparent;
}
@media (min-width: 801px){
  .view-content-card-favorite{
    opacity: 0.5;
    transition: transform .4s ease, opacity .3s ease;
  }

  .view-content-card-favorite.active{
    opacity: .8;
  }

  .view-content-card-favorite:hover{
    opacity: 1;
  }

  /* .view-content-card-border:hover .view-content-card-favorite{
    opacity: 1;
  } */
}

.view-content-card-image-loading{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #666;
  color: #fff;
}