.ogpm-sequence {
  --ogpm-gap: 20px;
  --ogpm-max: 1440px;

  width: 100%;
  max-width: var(--ogpm-max);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: var(--ogpm-gap);
}

.ogpm-block,
.ogpm-stack,
.ogpm-slot {
  min-width: 0;
  box-sizing: border-box;
}

.ogpm-block {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*
 * Desktop/tablette : hauteur adaptative par bloc.
 * Aucun format global n'est imposé.
 * La grande cellule (ou la cellule gauche en 50/50) conserve le ratio naturel
 * de son média et définit la hauteur de la composition. Les autres cellules
 * s'alignent sur cette hauteur et recadrent uniquement si nécessaire.
 */
.ogpm-block--50-50,
.ogpm-block--25-25-50,
.ogpm-block--50-25-25 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ogpm-gap);
  align-items: stretch;
}

.ogpm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ogpm-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.ogpm-slot {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.ogpm-media {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

/* 100 % : ratio naturel du média, jamais forcé. */
.ogpm-block--100 .ogpm-media {
  height: auto;
  object-fit: contain;
}

/*
 * Cellule d'ancrage : son aspect-ratio est injecté depuis les dimensions
 * réelles du fichier. Elle fixe donc naturellement la hauteur du bloc.
 */
.ogpm-slot--anchor {
  position: relative;
  min-height: 0;
}

.ogpm-slot--anchor .ogpm-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 50 / 50 : la deuxième cellule s'aligne sur la hauteur de l'ancre. */
.ogpm-block--50-50 > .ogpm-slot:not(.ogpm-slot--anchor) {
  position: relative;
  min-height: 0;
  align-self: stretch;
}

.ogpm-block--50-50 > .ogpm-slot:not(.ogpm-slot--anchor) .ogpm-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 25/25/50 et 50/25/25 : la grande cellule ancre la hauteur totale. */
.ogpm-slot--tall {
  align-self: stretch;
}

.ogpm-stack > .ogpm-slot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}

.ogpm-stack > .ogpm-slot .ogpm-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Smartphone : chaque média retrouve son ratio naturel et s'empile. */
@media (max-width: 767px) {
  .ogpm-sequence {
    --ogpm-gap: 10px;
  }

  .ogpm-block--50-50,
  .ogpm-block--25-25-50,
  .ogpm-block--50-25-25 {
    display: flex;
    flex-direction: column;
    gap: var(--ogpm-gap);
  }

  .ogpm-stack {
    height: auto;
  }

  .ogpm-slot,
  .ogpm-slot--anchor,
  .ogpm-slot--tall,
  .ogpm-stack > .ogpm-slot,
  .ogpm-block--50-50 > .ogpm-slot:not(.ogpm-slot--anchor) {
    height: auto;
    min-height: 0;
    position: static;
    flex: none;
    aspect-ratio: auto !important;
  }

  .ogpm-media,
  .ogpm-slot--anchor .ogpm-media,
  .ogpm-stack > .ogpm-slot .ogpm-media,
  .ogpm-block--50-50 > .ogpm-slot:not(.ogpm-slot--anchor) .ogpm-media {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}