/* ----------------------------------------- */ /* Inhoudssjabloon: loop-item-in-fokkerij - start */ /* ----------------------------------------- */ #spacer { padding: 20px; } a { color: inherit; }a:focus, a:hover { color: inherit; text-decoration: none; }.author { float: left; }.date { float: right; }.news-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; ; grid-template-areas: "news-image""news-content""news-footer"; margin-bottom: 15px; height: 380px; overflow: hidden; box-shadow: 1px 0px 10px 1px rgba(0, 0, 0, 0.2); }.news-image { grid-area: news-image; background-size: cover; background-position: center; height: 250px; max-width: 100%; } .news-image img { object-fit: cover; object-position: top; display: block; height: 100%; width: 100%; }.news-content { grid-area: news-content; padding: 10px 15px; height: 80px; }.news-content h4 { color: #000000; padding: 0px; font-size: 23px; }.news-footer { grid-area: news-footer; padding: 10px 15px; color: gray; }.news-cat { position: absolute; top: 230px; left: 10px; background-color: #082939; color: #fff; width: auto; padding: 5px; text-align: center; font-weight: 500; text-transform: uppercase; } .ribbon { position: absolute; right: 7px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: 11px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 100px; display: block; background: #79A70A; background: linear-gradient(#208BC9 0%, #1C66A7 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; right: -21px; } .ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #1C66A7; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #1C66A7; } .ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #1C66A7; border-bottom: 3px solid transparent; border-top: 3px solid #1C66A7; }/* ----------------------------------------- */ /* Inhoudssjabloon: loop-item-in-fokkerij - einde */ /* ----------------------------------------- */