:root {
  --fallback-font-stack: Helvetica, Arial, serif;
}

.grid-desktop.imageTextCard {
  display: flex;
  -moz-column-gap: 8px;
  column-gap: 8px;
}
@media (max-width: 767px) {
  .grid-desktop.imageTextCard {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 76%;
  }
}
.grid-desktop .iconGraphic {
  width: 21.82%;
  aspect-ratio: 0.56;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 767px) {
  .grid-desktop .iconGraphic {
    position: relative;
    width: 100%;
  }
}
.grid-desktop .colorBlockWrapper {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  width: 26.69%;
}
@media (max-width: 767px) {
  .grid-desktop .colorBlockWrapper {
    position: relative;
    width: 100%;
  }
}
.grid-desktop .primaryColorBlock {
  width: 100%;
  background-color: #f2b200;
  aspect-ratio: 1.78;
  border-radius: 12px;
}
.grid-desktop .colorBlockHolder {
  display: flex;
  -moz-column-gap: 8px;
  column-gap: 8px;
}
@media (max-width: 575px) {
  .grid-desktop .colorBlockHolder {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
.grid-desktop .secondaryColorBlock {
  width: 50%;
  background-color: #f2b200;
  aspect-ratio: 0.56;
  border-radius: 12px;
}
@media (max-width: 575px) {
  .grid-desktop .secondaryColorBlock {
    position: relative;
    margin-top: unset;
    margin-bottom: unset;
    width: 100%;
  }
}
.grid-desktop .accentColorBlock {
  width: 50%;
  background-color: #f2b200;
  aspect-ratio: 0.56;
  border-radius: 12px;
}
@media (max-width: 575px) {
  .grid-desktop .accentColorBlock {
    position: relative;
    margin-top: unset;
    margin-bottom: unset;
    width: 100%;
  }
}
.grid-desktop .secondaryIconGraphic {
  width: 21.91%;
  aspect-ratio: 0.57;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 767px) {
  .grid-desktop .secondaryIconGraphic {
    position: relative;
    width: 100%;
  }
}

/* -------------------- */
/* ===== Desktop / default ===== */
.imageTextCard{
  display:grid;
  grid-template-columns: 0.95fr 1.1fr 1.1fr 0.95fr; /* tall | mosaic | mosaic | tall */
  gap:16px;
  align-items:start;
  width:100%;
  max-width:1160px;
  margin:0 auto;
}

/* Tall tiles (left & right) */
.iconGraphic,
.secondaryIconGraphic{
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  aspect-ratio: 9 / 16;                 /* portrait */
}

/* Middle columns are mosaics */
.colorBlockWrapper{
  display:grid;
  grid-template-rows: auto auto;        /* top wide, bottom split */
  gap:16px;
}

.primaryColorBlock{
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  aspect-ratio: 16 / 9;                 /* wide */
}

.colorBlockHolder{
  display:grid;
  grid-template-columns: 1fr 1fr;       /* two portraits */
  gap:16px;
}

.secondaryColorBlock,
.accentColorBlock{
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  aspect-ratio: 9 / 16;                 /* portrait */
}

/* Videos fill their tiles */
.imageTextCard video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .imageTextCard{
    grid-template-columns: 1fr 1fr;     /* two columns */
  }
}

@media (max-width: 640px){
  .imageTextCard{
    grid-template-columns: 1fr;         /* stack */
  }
  /* prevent any overflow on mobile & ensure full-height fill */
  .iconGraphic,
  .secondaryIconGraphic,
  .primaryColorBlock,
  .secondaryColorBlock,
  .accentColorBlock{
    width:100%;
    height:auto;                         /* wrapper height comes from aspect-ratio */
  }
  .colorBlockHolder{
    grid-template-columns: 1fr;          /* stack the two small tiles */
  }
  .imageTextCard video{
    height:100%;                          /* video fills tile height */
  }
}
