body {
    font-family: "helvetica", sans-serif;
    text-align: center;
    height: 100%;
    margin: 0;
  }

  .content {
    min-height: 100%;
  }
.mini {
  font-size: 8px;
  margin-bottom: -20px;
}

article {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;

}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  padding: 20px;
}

figcaption {
  font-size: 10px;
  text-align: center;
  margin-top: -20px;
}


.header {
  height: 50px;
  padding: 5px 0 12px;
  background-color: #fc4e51;
  color: aliceblue;
}


.wrapper {

  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

ul,
ol {
  list-style: none;
}





.card-grid {
  margin: 2em 0;
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
  grid-gap: 1em;
  list-style-type: none;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* gap: 20px; */
}

.card {
  background-color: #F3F3F3;
  /* background-color: var(--bg-offset); */
  padding: 0px;
  /* box-shadow: 0px 2px 4px var(--border); */
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  /* border: 1px solid #e0e0e0; */
  border-radius: 8px;
  /* transition: transform 0.2s ease; */

  &:hover {
      /* transform: scale(1.1); */
      transform: translateY(-5px);

      .card-content {
          h2 {
              display: block;
              -webkit-line-clamp: none;
              -webkit-box-orient: none;
              overflow: visible;
          }
      }
  }
}
.card-image {
  max-height: 100px;
  max-width: 200px;
  /* max-width: 200px;
  min-width: none; */
  min-height: 100px;
  
  /* overflow: hidden; */
}
.card-image img {
  /* margin-top: -13px; */
  min-height: 100%;
  max-height: 100px;
  max-width: 200px;
  /* width: 100%; */
  /* object-fit: cover; */
  object-position: center;
  width: 100%;

}
.card-content {
  padding: 15px;

  h2 {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }
}
.card-list {
  font-size: 14px;
  
  margin-top: 16px;

  li {
      color: #666666;
      color: var(--text);
      margin-top: 8px;

      span {
          color: var(--gray);
      }
  }
}



@media (max-width: 375px) {
  .search-input {
      width: 100%;
  }
  .search-wrapper {
      justify-content: start;
      flex-wrap: wrap;
  }
  .select {
      margin-top: 3.5em;
  }
}