@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.thumbnail {
  align-items: flex-end;
  background-size: cover;
  bottom: 0;
  display: flex;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.thumbnail::before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.thumbnail--landscape::before {
  background: linear-gradient(
    180deg,
    rgba(42, 42, 42, 0%) 0%,
    rgba(42, 42, 42, 62%) 51.92%,
    var(--sem-color-bg-secondary-light-alt) 100%
  );
}

.thumbnail--portrait::before {
  background: linear-gradient(
    0deg,
    var(--sem-color-bg-secondary-light-alt) 0.01%,
    rgba(42, 42, 42, 90%) 16.31%,
    rgba(42, 42, 42, 81%) 26.66%,
    rgba(42, 42, 42, 0%) 100%
  );
}

.thumbnailContent {
  position: relative;
  padding: var(--sem-space-padding-130);
}

.thumbnail--portrait .thumbnailContent {
  padding: var(--sem-space-padding-110);
}

@media (--arc-custom-media-min-width-xl-px) {
  .thumbnailContent {
    padding: var(--sem-space-padding-160);
  }
}