.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  .card {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 0;
    width: 100%;
    max-width: 1200px;
    border: 1px solid #D8D8D8;
    text-decoration: none;
    color: inherit;
  }
  .card:hover {
    text-decoration: none;
  }
  .card-image {
    width: clamp(100px, 20%, 240px);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border: 1px solid #D8D8D8;
  }
  .card-content {
    padding: 20px;    
    position: relative;
    top: -15px;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
  }
  .card-title {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    font-weight: bold;
    margin: 0 0 15px 0;
  }
  .card-description {
    font-size: clamp(0.7rem, 1.7vw, 1rem);
    margin: 0 0 15px 0;
  }
  .card-site {
    font-size: 14px;
  }
  @media (max-width: 768px) {
      .card {
          flex-direction: column;
      }
      .card-image {
          width: 100%;
          max-width: none;
          height: 240px;
      }
      .card-title {
          font-size: 20px;
      }
      .card-description {
          font-size: 14px;
        }
      }

/* 카드 링크 스타일 재정의 */
.card,
.card:link,
.card:visited,
.card:hover,
.card:active,
.card *,
.card *:link,
.card *:visited,
.card *:hover,
.card *:active {
  color: inherit !important;
  text-decoration: none !important;
}