.ogp-card {
  border: 1px solid #1a1a1a;
  background: var(--bg, #fff);
  display: flex;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .25s, background .25s;
}

.ogp-card:hover {
  border-color: var(--main-color);
  background: rgba(0,0,20,0.02);
}

.ogp-card a {
  display: flex;
  color: inherit;
  gap: 0;
  width: 100%;
}

.ogp-card__thumb {
  flex: 0 0 38%;
  max-width: 240px;
  outline: 1px solid #1a1a1a;
}
.ogp-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #eee;
}

.ogp-card__body {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  color: #1a1a1a;
}

/* タイトル */
.ogp-card__title {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* 説明文：2行でフェード */
.ogp-card__desc {
  font-size: .85rem;
  line-height: 1.4;
  opacity: .85;
  max-height: calc(1.4em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* URLはドメイン抽出前提でシンプルに */
.ogp-card__url {
  margin-top: .1rem;
  font-size: .75rem;
  opacity: .6;
  letter-spacing: .03em;
}

/* モバイルで縦型レイアウト */
@media (max-width: 600px) {
  .ogp-card,
  .ogp-card a {
    flex-direction: column;
  }
  .ogp-card__thumb {
    width: 100%;
    max-width: 100%;
  }}