.pp-widgets-collage-style1 {
  --collage__gap: 0.4rem;

  --collage__border-color: var(--v-color__white--alt1);
  --collage__border-size: var(--collage__gap);

  --collage__float-right: 0px;
  --collage__float-overhang: 4rem;

  --collage__chip-top: -2rem;
  --collage__chip-right: 0px;
  --collage__chip-width: 9.5rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto var(--collage__float-overhang);
}

.pp-widgets-collage-style1__row {
  grid-column: 1;
  grid-row: 1;
  width: 86%;

  display: flex;
  gap: var(--collage__gap);
}

.pp-widgets-collage-style1__item {
  flex: 1 1 0;
  min-width: 0;
}

.pp-widgets-collage-style1__picture {
  display: block;
  overflow: hidden;
  border-radius: var(--v-border-radius__md);
}

.pp-widgets-collage-style1__item .pp-widgets-collage-style1__picture {
  aspect-ratio: 2 / 3;
}

.pp-widgets-collage-style1__floating {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: end;
  justify-self: end;

  width: 42%;
  margin-right: var(--collage__float-right);
}

.pp-widgets-collage-style1__floating .pp-widgets-collage-style1__picture {
  aspect-ratio: 3 / 4;
  border: var(--collage__border-size) solid var(--collage__border-color);
}

.pp-widgets-collage-style1__chip {
  position: absolute;
  top: var(--collage__chip-top);
  right: var(--collage__chip-right);
  z-index: 10;

  max-width: calc( var(--collage__chip-width) * 0.8 );
  padding: 0.8rem;
  border-radius: var(--v-border-radius__md);

  background-color: var(--v-color__1);
  box-shadow: var(--v-shadow__md);
  text-align: center;
}

.pp-widgets-collage-style1__chip-value {
  display: block;
  font-size: var(--v-font-size__h3);
  font-weight: var(--v-font-weight__default--bold);
  line-height: 1;
  color: var(--v-color__2);
}

.pp-widgets-collage-style1__chip-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--v-color__1--alt1);
}
