.content { max-width: 100%; } .content-primary { width: calc(100% - 20px); padding: 0 10px; } .pandemic-page { font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif; font-size: 18px; max-width: 1200px; margin: 0 auto; line-height: 28px; } .pandemic-page ul { margin: 0 0 15px 35px; } .pandemic-headline { font-size: 40px; line-height: 44px; font-family: 'CTVSans-Bold', 'CTV Sans', Arial, Helvetica, sans-serif; font-weight: normal; margin: 18px 0; } .pandemic-map-title { font-family: 'CTVSans-Bold', 'CTV Sans', Arial, Helvetica, sans-serif; font-weight: normal; line-height: 32px; margin: 14px 0; } .pandemic-page p { margin: 0 0 18px 0; } .pandemic-map { width: calc(100% - 42px); max-width: 1000px; margin: 8px auto 0; padding: 0 20px 20px; background: #fafafa; border: 1px solid #f3f3f3; position: relative; } .pandemic-map-grid { position: relative; width: calc(100% - 42px); display: grid; grid-template-columns: 1fr; gap: 15px; margin: 0 auto 20px; max-width: 1000px; } .pandemic-thumbnail-div { display: grid; grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) ); gap: 15px; } .pandemic-thumbnail { padding: 0px; border-radius: 5px; transition: 0.25s; } .pandemic-thumbnail.not-selected { background: #fafafa; border: 1px solid #dadada; color: #6a6a6a; cursor: pointer; } .pandemic-thumbnail.selected { background: #3a3a3a; border: 1px solid #aaaaaa; color: #f3f3f3; } .pandemic-thumbnail.not-selected > img { filter: brightness(90%); } .pandemic-thumbnail-img { border-radius: 5px 5px 0 0; width: 100%; height: 100px; background: #d3d3d3; object-fit: cover; } .pandemic-thumbnail-title { font-size: 13px; line-height: 1.2; pointer-events:none; padding: 0 10px 7px; } .fullscreen-icon-div { padding: 10px; border-radius: 5px; background: #932439; position: absolute; bottom: 30px; left: 30px; line-height: 0; opacity: 0.8; } .fullscreen-icon { width: 20px; height: 20px; } @media (max-width: 884px) { .pandemic-thumbnail-div { grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); } } @media (max-width: 768px) { div.content .election-follow-cta { width: auto; } .fullscreen-icon-div { bottom: 10px; left: 20px; } .pandemic-map-grid { width: 100%; } .pandemic-map { width: calc(100% - 22px); padding: 0 10px 0px; } .pandemic-thumbnail-div { grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) ); } }