/* LISTINGS */ .entry-listings { display: block; position: relative; overflow: hidden; padding: 0; margin: 0; } .entry-listings.grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; } .grid.fourcolumns { grid-template-columns: 1fr 1fr 1fr 1fr; } .grid.threecolumns { grid-template-columns: 1fr 1fr 1fr; } .grid.onecolumn { grid-template-columns: 1fr; } .fourcolumns .listing-item-title { font-size: 1rem; line-height: 1.25rem; } .fourcolumns .department-item { font-size: 0.75rem; line-height: 0.875rem; margin: 0.5rem 0; } .fourcolumns .item-label { font-size: 0.75rem; line-height: 0.75rem; margin: 0.5rem 0; } /* ITEMS */ .entry-item { display: inline-block; position: relative; width: 100%; color: #262626; } .entry-item-figure { display: block; position: relative; overflow: hidden; padding: 0; margin: 0; box-sizing: border-box; border: 1px solid #dadada; width: 100%; height: auto; } .entry-item-figure figcaption { display: block; position: relative; margin: 0; padding: 1rem; } .entry-item-figure .featured-title { display: flex; position: relative; flex-wrap: nowrap; align-items: baseline; } .entry-item-figure .featured-excerpt { display: block; position: relative; font-weight: 100; margin: 0.25rem 0; } .entry-item-figure .entry-title { display: inline-block; position: relative; font-size: 1.5rem; line-height: 1.75rem; font-weight: 700; } .entry-item-figure .entry-status { display: block; position: absolute; font-size: 1.25rem; line-height: 1.25rem; font-weight: 600; padding: 0.5rem 1rem; vertical-align: middle; color: #fff; text-transform: uppercase; top: 0; left: 0; z-index: 2; } a.entry-item-link { color: inherit; text-decoration: none; } a.entry-item-link:hover .entry-item-figure { border-color: #e60505; } a.entry-item-link:hover .entry-qualifier { text-decoration: underline; } .site-content.episode-feed { background-color: #f0f0f0; } .site-content.episode-feed .site-content-container { display: block; } .site-content.features-feed { background-color: #fff; } .site-content.features-feed .site-content-container { display: block; } .entry-status { display: block; position: absolute; top: 0; left: 0; font-size: 0.875rem; line-height: 0.875rem; color: #fafafa; background-color: #333; padding: 0.375rem 0.625rem; z-index: 2; } .department-item { display: inline-block; position: relative; overflow: hidden; font-weight: 500; color: #666; font-size: 0.875rem; line-height: 1rem; margin: 1rem 0 0 0; } .item-label { display: inline-block; position: relative; overflow: hidden; font-weight: 700; color: #666; text-transform: uppercase; font-size: 0.875rem; line-height: 1rem; margin: 0 0 1rem 0; } /* LISTING ITEM */ .listing-item-link { display: block; position: relative; overflow: hidden; text-decoration: none; width: 100%; height: auto; box-sizing: border-box; border: 1px solid #dadada; background-color: #fff; } .listing-item-link:hover, .listing-item-link:focus { border-color: #e60505; } .listing-item { display: flex; position: relative; flex-wrap: wrap; width: 100%; height: auto; overflow: hidden; box-sizing: border-box; margin: 0; } .listing-item img { display: inline-block; } .listing-item .howtowatch img { max-width: 4rem; overflow: hidden; } .listing-item figcaption { display: inline-block; padding: 1rem; box-sizing: border-box; width: 100%; } .listing-item figcaption .listing-item-title { display: block; position: relative; font-size: 1.5rem; line-height: 1.7rem; font-weight: 700; color: #424242; width: 100%; margin: 0; } .listing-item figcaption .listing-item-excerpt { display: block; position: relative; font-size: 1rem; line-height: 1.25rem; color: #424242; margin-top: 1.5rem; width: 100%; } .listing-item.filmmaker img { max-width: 4rem; } .listing-item.filmmaker figcaption { } .listing-item-image { width: 100%; box-sizing: border-box; /* padding-bottom: 16.875%; */ } .listing-item-image.filmmakers img { margin-top: -21.675%; } .listing-item-date-block { display: block; position: relative; font-size: 0.875rem; color: #666; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid #e0e0e0; width: 100%; } .listing-item-date-block .listing-item-date { color: #444; font-weight: 700; } .listing-item-date-block .listing-item-network { color: #444; font-weight: 700; } .grid .listing-item { flex-wrap: wrap; margin-bottom: 0; } .grid .listing-item .listing-item-image { width: 100%; padding-bottom: 56.25%; } .grid .listing-item figcaption { width: 100%; padding: 1rem; } .featured-entry .listing-item figcaption .listing-item-title { font-size: 2rem; line-height: 2.5rem; } .featured-entry .listing-item figcaption .listing-item-excerpt { font-size: 1.25rem; line-height: 1.75rem; font-weight: 300; } .related-links .listing-item figcaption .listing-item-title { font-size: 1rem; line-height: 1.25rem; } .entry-qualifier { display: block; position: relative; font-size: 0.875rem; line-height: 1.5rem; text-transform: uppercase; color: #003366; font-weight: 700; margin-top: 1rem; } :hover .entry-qualifier { text-decoration: underline; } a.listing-link { display: block; position: relative; font-size: 1.25rem; line-height: 1.5rem; color: #003366; font-weight: 600; text-decoration: none; margin: 2rem 0; box-sizing: border-box; } a.listing-link:hover { text-decoration: underline; } /* PAGINATION */ .pagination-container { display: flex; position: relative; flex-wrap: nowrap; margin: 1rem 0 3rem 0; padding: 0; grid-column-start: 1; grid-column-end: 3; flex-wrap: nowrap; align-items: center; justify-content: center; } .pagination-container.filmmakers { grid-column-start: 1; grid-column-end: 4; } .pagination-container.episodes { grid-column-start: 1; grid-column-end: 3; } .pagination-container.features { grid-column-start: 1; grid-column-end: 3; } .pagination-element { padding: 0.5rem 1rem; background-color: #dadada; color: #424242; border-radius: 1rem; overflow: hidden; line-height: 1.25rem; font-size: 1rem; font-weight: 300; display: inline-block; vertical-align: middle; margin: 0 0.25rem; } a.pagination-element { text-decoration: none; } a.pagination-element:hover { text-decoration: none; background-color: #afafaf; color: #000; }