.column-card{
  display:flex;
  align-items:center;
  gap:1.15em;
  text-align:start;
  height:100%;
  padding:1.25em 1.2em;
  background:color-mix(in srgb, rgb(var(--section-text-color)) 4%, var(--section-bg-color, #fff));
  border:1px solid rgba(var(--section-text-color), 8%);
  border-radius:16px;
}
.column-card .column-img{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  background:#fff;
  border-radius:14px;
}
.column-card .column-img img{
  width:48px;
  height:48px;
  -o-object-fit:contain;
     object-fit:contain;
  border-radius:0;
}
.column-card .column-img img[data-width$=full],
.column-card .column-img img[data-width$=medium],
.column-card .column-img img[data-width$=small]{
  width:48px;
  height:48px;
}
.column-card .column-img img[data-ratio$=square],
.column-card .column-img img[data-ratio$=circle]{
  aspect-ratio:auto;
  clip-path:none;
  -o-object-fit:contain;
     object-fit:contain;
}
.column-card .column-info{
  display:grid;
  grid-gap:0.25em;
  gap:0.25em;
  min-width:0;
}
.column-card .column-info .column-title{
  font-size:var(--text-md);
  font-weight:600;
}
.column-card .column-info .column-subtitle{
  font-size:var(--text-sm);
  color:rgba(var(--section-text-color), 0.7);
}
@media (max-width: 768px){
  .column-card{
    padding:1em;
  }
}