/**
 * black    : e.g. standard body text
 * gray1    : e.g. standard body text
 * gray2    : e.g. form button hover
 * gray3    : e.g. form button hover
 * gray4    : e.g. secondary text
 * gray5    : e.g. form button hover
 * gray6    : e.g. form button hover
 * gray7    : e.g. form field borders
 */

:root {
    /* Base units*/

    /* 
    Typography
    The sizes are calculated from the --base-fontSize. Using 'rem' instead of
    'em' gives us better control in case of nesting and inheritance.
    */      /*11px*/       /*14px*/           /*16px*/        /*20px*/    /*23px*/        /*28px*/        /*36px*/ /*used for ad, sponsored content*/

    /*
    Colors
     */
    
    /* Grayscale */

    /* Borders */

    /* Colors: Highlights (skins) */

    /* Colors: Notification states */

    /* Colors: Variable names */
 

    /*Border radius*/   
}.album-teaser {
    display: block;
    position: relative;
}.album-teaser:hover {
    cursor: pointer;   
}.album-teaser .badge {
    z-index: 1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: #222;
    color: white;
    padding: 10px 15px;
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    box-shadow:         0px 3px 11px 0px rgba(50, 50, 50, 0.57);   
}.album-teaser .badge p {
    font-size: .8rem;
    margin: 0;
    line-height: 1.5;
    font-weight: 800;   
}.album-teaser .badge .teaser-title {
    white-space: nowrap;
    color: #eaeaea;   
}.album-teaser .badge .teaser-title strong {
    text-transform: uppercase;   
}.album-teaser .badge .total-cards {}.album-teaser .badge .title {
    font-size: 1rem;   
}
.album-teaser:hover .badge {
    background-color: #333; 
    color: #fff;
    transition: 0.8s ease;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.63);
    box-shadow: none;
}

@media screen and (min-width: 481px) {
  .album-teaser .badge .title {
      font-size: 1.2rem;
  }
}