Template:Main Page/Card/styles.css

.home-card { position: relative; padding: 15px; background: #888; background: rgba(128, 128, 128, 0.2); border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15); font-size: 0.875rem; overflow: hidden; min-height: 60px; } .home-card__featured { padding: 0; min-height: 120px; } .home-card--button { padding: 0; overflow: hidden; }

.home-card--col2 { grid-column: span 2; } .home-card--row3 { grid-row: span 3; } .home-card--row8 { grid-row: span 8 / auto; }

.home-card__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #242a31; }

.home-card .home-card__background:after { position: absolute; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; content: ''; background: linear-gradient(to right, rgba(0,0,0,0.75), transparent); } .home-card__featured .home-card__background:after { top: auto; height: 50%; background: linear-gradient( to top, rgba(0,0,0,0.75), transparent ); }

.home-card__background img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .2s ease; } .home-card:hover .home-card__background img { transform: scale( 1.1 ); }

.home-card .home-card__foreground { position: absolute; pointer-events: none; height: 100%; display: flex; align-items: center; padding: 0 15px; color: #fff; font-weight: 700; text-shadow: 1px 1px #000; } .home-card__featured .home-card__foreground { flex-direction: column-reverse; align-items: baseline; bottom: 8px; font-size: 1rem; }

.home-card .home-card__label { font-weight: normal; font-size: 0.8rem; letter-spacing: 0.75px; color: #bababa; margin-top: -2px; }

/* */