/**
 * @file
 * Poster styles
 */

.poster {
  position: relative;
  margin: 1rem auto;
  height: fit-content;
  display: block;
}
.poster__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 55, 24, 0) 41.98%, #003718 93.84%);
}
.poster:hover .poster__wrapper::after {
  background: #003718;
  opacity: 0.3;
}
.poster__wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all ease 150ms;
}
.poster__image  img{
  display: block;
  width: 100%;
}
.poster__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 45%;
  padding: 1rem 2rem 2rem;
  z-index:2;
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: var(--color-neutral--5);
}
.poster__text {
  text-transform: uppercase;
  font-weight: 600;
  font-family: "signo",sans-serif;
  font-size: var(--heading-size-xs);
}
.poster__info {
  display: inline-block;
  position: relative;
  width: fit-content;
}
.poster__info::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 5px;
  background-image: url('../../images/border-poster.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  transition: 0.2s;
}
.poster:hover .poster__info::after {
  transform: translateY(3px);
}

/**
 * Layout Poster Mask
 */

.poster::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -2px;
  top: 0;
  z-index: 3;
  -webkit-mask-image: url(../../images/shredded-poster.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
  -webkit-mask-size: 100%;
  mask-image: url(../../images/shredded-poster.svg);
  mask-repeat: no-repeat;
  mask-position: bottom right;
  mask-size: 100%;
  background: var(--color-neutral--5);
}
.layout__region--first .poster:nth-child(2n):after,
.layout__region--second .poster::after,
.layout__region--third .poster:nth-child(2n)::after,
.layout__region--fourth .poster::after {
  -webkit-mask-image: url(../../images/shredded-poster-alt.svg);
  mask-image: url(../../images/shredded-poster-alt.svg);
}
.layout__region--second .poster:nth-child(2n)::after,
.layout__region--fourth .poster:nth-child(2n)::after {
  -webkit-mask-image: url(../../images/shredded-poster.svg);
  mask-image: url(../../images/shredded-poster.svg);
}

/**
 * Mask poster color
 */

.section--primary .poster::after {
  background: var(--color-neutral--5);
}
.section--secondary .poster::after {
  background: var(--color-highlight--3);
}


/**
 * Poster Large
 */

.poster--large .poster__content {
  padding: 1rem 2rem 3rem;
}