.collage-container {
  background-color: rgb(var(--color-background));
}

.collage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.collage .collage__title {
  margin-block-end: 40px;
  text-align: center;
}

.collage .block-collection-card {
  height: auto;
}

.collage__content {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

.collage__single-group {
  flex: 2;
  width: 100%;
}

.collage__single-group theme-video-media,
.collage__single-group .theme-video-media {
  width: 100%;
  height: 100%;
}

.collage__single-group .block-image {
  width: 100%;
}

.collage__single-group .block-collection-card,
.collage__single-group .block-collection-card__image-wrapper {
  height: 100%;
}

.collage__both-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 40px;
  justify-content: space-between;
}

.collage__both-group theme-video-media,
.collage__both-group .theme-video-media {
  width: 100%;
  height: 100%;
  aspect-ratio: unset !important;
}

.collage__both-group .collage__both-group-item {
  flex: 1;
}

@media (min-width: 960px) {
  .collage-container--fit-viewport .collage__content {
    height: min(var(--collage-desktop-max-height), calc(100dvh - 120px));
    min-height: 480px;
  }

  .collage-container--fit-viewport .collage__single-group,
  .collage-container--fit-viewport .collage__both-group,
  .collage-container--fit-viewport .collage__both-group-item {
    min-height: 0;
  }

  .collage-container--fit-viewport .collage__single-group .block-image,
  .collage-container--fit-viewport .collage__single-group .block-video,
  .collage-container--fit-viewport .collage__single-group theme-video-media,
  .collage-container--fit-viewport .collage__single-group .theme-video-media {
    width: 100%;
    height: 100% !important;
  }

  .collage-container--fit-viewport .collage__single-group .block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collage-container--fit-viewport .collage__both-group {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .collage-container--fit-viewport .collage__both-group .block-product-card {
    height: 100%;
    min-height: 0;
    overflow: auto;
  }

  .collage-container--fit-viewport
    .collage__both-group
    .collection-card-shadow-space {
    height: 100%;
    min-height: 0;
  }

  .collage-container--fit-viewport .collage__both-group .block-collection-card {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .collage-container--fit-viewport
    .collage__both-group
    .block-collection-card__image-wrapper {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .collage-container--fit-viewport
    .collage__both-group
    .block-collection-card__image-wrapper
    img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .collage-container--product-sticky
    .collage__both-group-item:has(.block-product-card) {
    position: sticky;
    inset-block-start: var(--collage-product-sticky-top);
    z-index: var(--z-index-active);
    align-self: start;
    width: 100%;
    background-color: rgb(var(--color-background));
  }

}

@media (max-width: 959px) {
  .collage__content {
    flex-direction: column;
    gap: 10px;
  }

  .collage__both-group {
    flex-direction: var(--mobile-direction);
    gap: 10px;
  }
}