/* =============================== BASE ================================ */ *{box-sizing: border-box} body { font-family: "Open Sans", Helvetica, Arial, sans-serif; margin: 0; background: #fff; color: #222; } h1, h2, h3, p, ul, ol, li, a { font-family: inherit; } /* =============================== LAYOUT ================================ */ .container { max-width: 1080px; margin: auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 226px; gap: 60px; } .content { width: 796px; width: 100%; padding-top: 58px; } .sidebar { width: 226px; padding-top: 58px; padding-left: 28px; border-left: 1px solid #e2e2e2; } /* =============================== TYPOGRAPHY ================================ */ h1 { font-size: 38px; line-height: 1.3; font-weight: 500; margin: 0; } .content h2 { font-size: 30px; font-weight: 600; color: #000; line-height: 1.4; margin: 0 0 10px; } .content h3 { font-size: 22px; font-weight: 700; color: #000; line-height: 1.4; margin: 0 0 10px; } .meta { font-size: 14px; color: #777; margin-bottom: 20px; } .content p { font-size: 18px; font-weight: 500; line-height: 1.9; margin: 0 0 1em; } .content strong { font-weight: 700; } /* =============================== MEDIA ================================ */ .featured-img img, .content p img { width: 100%; border-radius: 6px; } .content p img { max-width: 592px; margin: 0 auto; display: block; } center img { border-radius: 7px; } /* =============================== LISTS ================================ */ .content ul { list-style: disc; padding: 0 0 23px 1em; line-height: 26px; margin: 0; } .content ul li, .content ol li { font-size: 18px; font-weight: 600; } .content ol { padding-left: 19px; margin: 0; } /* =============================== LINKS ================================ */ .content a { color: #2ea3f2; text-decoration: none; } .content a:hover { color: #2ea3f2; } .sidebar a { color: #666; text-decoration: none; } .sidebar a:hover { color: #82c0c7; text-decoration: underline; } /* =============================== SIDEBAR ================================ */ .sidebar h3 { font-size: 18px; margin-top: 30px; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { margin-bottom: 12px; } .sidebar ul li a { font-size: 14px; line-height: 1.7; font-weight: 500; } /* =============================== SEARCH ================================ */ .search_bar { width: 196px; display: flex; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; } .search_bar input { flex: 1; height: 40px; padding: 0 10px; border: none; font-size: 14px; width: calc(100% - 66px); } .search_bar input:focus { outline: none; } #searchBtn { width: 66px; height: 40px; border: none; font-size: 14px; color: #666; background: #ddd; cursor: pointer; } #searchBtn:hover { background: #e6e6e6; } /* =============================== RELATED ================================ */ .related_articles_box { margin-top: 50px; } .content .related_articles_box h3 em { font-weight: 500; } /* =============================== RESPONSIVE ================================ */ /* TABLET */ @media (max-width: 1024px) { .container { max-width: 90%; grid-template-columns: 2.5fr 1fr; gap: 40px; } .sidebar { width: 100%; padding-left: 20px; } } /* MOBILE */ @media (max-width: 767px) { .container { grid-template-columns: 1fr; gap: 0; } .content { max-width: 100%; width: 100%; padding-top: 30px; } .sidebar { border-left: none; padding-left: 0; padding-top: 30px; } h1 { font-size: 29px; line-height: 1.3em;} .content h2 { font-size: 27px; line-height: 1.4em;} .content h3 { font-size: 22px; } .search_bar { width: 100%; } .featured-img img, .content p img { max-width: 100%; }  .content ol li { word-break: break-all;} center img{width: 100%; height: auto;} } /* SMALL MOBILE */ @media (max-width: 480px) { h1 { font-size: 29px; } .content h2 { font-size: 27px; } .content h3 { font-size: 22px; } #searchBtn { width: 60px; } }