/* a grid container */
.demosg__card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* a card with round corners and some drop shadow */
.demosg__card {
  border-radius: .5rem;
  overflow: clip;
  background-color: #fff;
  box-shadow: 0 1px 2px -1px #ccc;
}

/* Make sure the image looks good */
.demosg__img-wrapper {
  aspect-ratio: 16/9;
  overflow: clip;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* collect all the content */
.demosg__content-wrapper {
  display: grid;
  gap: .5rem;
  padding-inline: 1rem;
  color: #4a5565;
  font-size: 12px;

  h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }

  /* I know... I smuggled with the marker */
  ul {
    list-style-position:initial;
    margin-inline: .65rem;

    ::marker {
      color: #2b7fff;
    }
  }
}

/* and wrap it up */
.demosg__footer {
  font-size: 10px;
  border-top: 1px solid #ccc;
  padding-block: 0.5rem;
}

.demosg__fix {
  .demosg__card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }

  .demosg__content-wrapper {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

/* do 3 columns on screens > 512 */
@media(width > 512px) {
  .demosg__card-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}