/** @fileoverview: otdSimpleCard.css **/
/* <!-- -------------------------------------------------------------
  ___              ___  __   __        __   __   __
 |   |/\\\   |  | |__  |__) /  `  /\  |__) |  \ (__`
 |   |  \\\  |/\| |___ |__) \__, /--\ |  \ |__/ .__)
 |___| ///   card models for computing, composing, and communication
-----\///------------------------------------------------------------> */
:root {
  --otdSimpleCardImageBorder: solid 1px rgb(200, 200, 200);
  --otdSimpleCardFadeUpAnim:  fadeUpAnim 0.25s ease-in-out 0.25s forwards;
  --otdSimpleCardWidth:       20rem;
  --otdSimpleCardHeight:      25rem;
}

.otdSimpleCardContainer {
  animation:            var(--fadeUpAnim);
  background:           white;
  border-radius:        1rem;
  box-shadow:           var(--boxShadow);
  max-width:            var(--otdSimpleCardWidth);
  man-height:           var(--otdSimpleCardHeight);
  min-height:           var(--otdSimpleCardHeight);
  opacity:              0;
  position:             relative;
  transition:           all 1s ease;
  width:                var(--otdSimpleCardWidth);
  z-index:              5;
}

.otdSimpleCardImageContainer {
  align-items:          center;
  border-bottom:        var(--otdSimpleCardImageBorder);
  border-radius:        0.9rem 0.9rem 0 0;
  display:              flex;
  justify-content:      center;
  height:               auto;
  max-height:           15rem;
  overflow:             hidden;
  position:             relative;
}

.otdSimpleCardBlurryImage {
  aspect-ratio:         1 / 1;
  background-image:     none;
  background-position:  center;
  border-radius:        1rem 1rem 0 0;
  filter:               blur(2px) brightness(75%);
  left:                 0;
  object-fit:           contain;
  object-position:      center;
  position:             absolute;
  top:                  0;
  transform:            scale(1.5);
  width:                100%;
  z-index:              1;
}

.otdSimpleCardImage {
  background:           white;
  height:               100%;
  max-height:           15rem;
  object-fit:           contain;
  object-position:      center;
  position:             relative;
  z-index:              2;
}

.otdSimpleCardDate {
  color:                green;
  font-family:          monaSansLight;
  font-size:            1.25rem;
  margin-top:           0.5rem;
  overflow:             hidden;
  text-align:           center;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  width:                100%;
}

.otdSimpleCardDescription {
  /*
  -webkit-box-orient:   vertical;
  -webkit-line-clamp:   3;
  */
  color:                black;
  display:              -webkit-box;
  font-size:            0.8rem;
  overflow:             hidden;
  margin:               0.5rem 0.5rem 0.5rem 0.5rem;
  text-overflow:        ellipsis;
}

.otdSimpleCardMetaData {
  color:                rgb(50, 50, 50);
  font-size:            0.65rem;
  padding:              0 0 0.5rem 0.5rem;
}