.ssg6-grid{
  --ssg6-gap: 16px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--ssg6-gap);
  align-items: stretch;
}

.ssg6-side,
.ssg6-middle{
  min-width: 0;
}

.ssg6-left  { grid-area: left; }
.ssg6-middle{ grid-area: middle; }
.ssg6-right { grid-area: right; }

.ssg6-grid{
  grid-template-areas: "left middle right";
}


.ssg6-middle{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--ssg6-gap);
}

.ssg6-row{
  display: flex;
  gap: var(--ssg6-gap);
  min-width: 0;
}

.ssg6-row--top .ssg6-card--short{ flex: 0 0 42%; }
.ssg6-row--top .ssg6-card--long { flex: 1 1 auto; }

.ssg6-row--bottom .ssg6-card--long { flex: 1 1 auto; }
.ssg6-row--bottom .ssg6-card--short{ flex: 0 0 42%; }

.ssg6-card{
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.06);
}

.ssg6-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ssg6-card--tall{
  min-height: 360px;
}

.ssg6-card--short,
.ssg6-card--long{
  min-height: 170px;
}

.ssg6-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 60%);
  pointer-events: none;
}

.ssg6-title{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ssg6-card--empty{
  background: rgba(0,0,0,.04);
}

.ssg6-empty{
  padding: 16px;
  opacity: .7;
}


@media (max-width: 1024px){
  .ssg6-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "middle middle";
  }

  .ssg6-card--tall{
    min-height: 300px;
  }
}


@media (max-width: 767px){
  .ssg6-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "middle"
      "right";
  }

  .ssg6-row{
    flex-direction: column;
  }

  .ssg6-card{
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .ssg6-card--tall{
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .ssg6-card--short,
  .ssg6-card--long{
    min-height: 0;
  }
}