sparkletown/sparkle

@import "scss/constants";

$common-width: 90%;
$poster-height--selected: 90%;
$poster-height--default: 50vh;

$background--gradient: linear-gradient(
    180deg,
    rgba(25, 24, 26, 0.32) 0%,
    rgba(25, 24, 26, 0.8) 100%
  )
  center;

.PortalShowcase {
  display: grid;
  place-content: center;
  padding: $spacing--xl;

  &__description {
    width: $common-width;
    margin-bottom: $spacing--xl;
    text-align: center;
  }

  &__poster {
    width: $common-width;
    height: $poster-height--selected;
    margin: 0;
    padding: 0;
    background-size: cover;
    background: $background--gradient;
    border: $border-width--bold solid var(--content--over-20a);
    border-radius: $border-radius--md;
    box-shadow: box-shadow--medium(var(--content--under-25a));

    &--default {
      width: unset;
      height: $poster-height--default;
      aspect-ratio: 16/9;
    }
  }
}