#learn-to-invest-browser { font-family: "Open Sans", Arial, sans-serif; }
.iw_comp1663633861828-grid { max-width: 1420px; margin: 0 auto; padding: 60px 30px 72px; color: #363b40; }
.article-browser__eyebrow { display: inline-flex; flex-direction: column; gap: 6px; color: #363b40; font-size: 14px; font-weight: 700; letter-spacing: 5px; line-height: 22px; text-transform: uppercase; }
.article-browser__eyebrow::before { width: 60px; height: 4px; background: #e30613; content: ""; }
.article-browser__layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 60px; margin-top: 40px; }
.article-browser__filters { align-self: start; }
.article-browser__filters h2 { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 26px; }
.article-browser__option { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #363b40; cursor: pointer; font-size: 17px; line-height: 30px; }
.article-browser__option input { width: 20px; height: 20px; margin: 0; accent-color: #3D525D; }
.article-browser__apply, .article-browser__reset { border: 0; padding: 0; background: transparent; color: #005efd; cursor: pointer; font: inherit; font-size: 18px; line-height: 30px; text-decoration: unset; text-underline-offset: 3px; }
.article-browser__apply:focus, .article-browser__reset:focus { outline: none; }
.article-browser__apply:focus-visible, .article-browser__reset:focus-visible { outline: 2px solid #2979ff; outline-offset: 2px; }
.article-browser__apply { margin-top: 10px; }
.article-browser__main { min-width: 0; }
.article-browser__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 30px; }
.article-browser__count { margin: 0; color: #363b40; font-size: 18px; line-height: 30px; }
.article-browser__controls { display: flex; align-items: center; gap: 18px; }
.article-browser__sort { display: flex; align-items: center; gap: 10px; color: #363b40; font-size: 16px; white-space: nowrap; }
.article-browser__sort select { min-width: 112px; border: 0; border-bottom: 2px solid #2979ff; border-radius: 0; padding: 5px 24px 5px 0; background: #fff; color: #2979ff; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; }
.article-browser__sort select:focus { outline: 2px solid rgba(41, 121, 255, .18); outline-offset: 1px; }
.article-browser__search { display: flex; align-items: center; min-width: 0; padding-left: 18px; border-left: 1px solid #d3dae1; }
.article-browser__search-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border: 0; padding: 0; background: transparent; color: #363b40; cursor: pointer; }
.article-browser__search-toggle svg { width: 19px; height: 19px; stroke: currentColor; pointer-events: none; }
.article-browser__search-toggle:focus { outline: 2px solid rgba(41, 121, 255, .18); outline-offset: 1px; }
.article-browser__search-field { flex: 0 0 0; width: 0; overflow: hidden; transition: flex-basis .2s ease, width .2s ease; }
.article-browser__search-field input { box-sizing: border-box; width: 100%; height: 42px; border: 1px solid #d3dae1; border-radius: 0; padding: 0 12px; background: #fff; color: #363b40; font: inherit; font-size: 16px; }
.article-browser__search-field input:focus { border-color: #2979ff; outline: 2px solid rgba(41, 121, 255, .18); outline-offset: 1px; }
.article-browser__search.is-open .article-browser__search-field { flex-basis: 220px; width: 220px; margin-right: 10px; }
.article-browser__featured, .article-browser__cards { display: grid; gap: 20px; }
.article-browser__featured { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; }
.article-browser__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-browser__card { display: block; min-width: 0; color: #363b40; text-decoration: none; }
.article-browser__image { position: relative; border: 1px solid #d3dae1; background: #fff; overflow: hidden; }
.article-browser__image::after { display: block; padding-top: 75%; content: ""; }
.article-browser__image img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.article-browser__copy { position: relative; z-index: 1; min-height: 166px; margin: -60px 20px 0; padding: 30px; background: #fff; box-shadow: 0 6px 18px rgba(61, 82, 93, .12); }
.article-browser__featured .article-browser__copy { min-height: 184px; margin-top: -60px; padding: 30px 40px; }
.article-browser__category { display: block; margin-bottom: 18px; font-size: 15px; font-weight: 700; line-height: 22px; }
.article-browser__title { display: flex; gap: 12px; align-items: end; justify-content: space-between; margin: 0; color: #363b40; font-size: 18px; font-weight: 400; line-height: 30px; }
.article-browser__featured .article-browser__title { font-size: 23px; line-height: 34px; }
.article-browser__arrow { flex: 0 0 auto; color: #005efd; font-size: 25px; line-height: 1; }
.article-browser__date { display: block; margin-top: 12px; color: #68747e; font-size: 13px; line-height: 18px; }
.article-browser__card:hover .article-browser__title, .article-browser__card:focus .article-browser__title { color: #005efd; }
.article-browser__pagination { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: center; margin-top: 60px; }
.article-browser__page { display: flex; align-items: center; justify-content: center; width: 20px; height: 32px; border: 0; padding: 0; background: transparent; color: #363b40; cursor: pointer; font: inherit; font-size: 18px; font-weight: 700; line-height: 26px; border-radius: 50%; }
.article-browser__page:hover { color: #005efd; }
.article-browser__page:focus { outline: none; }
.article-browser__page:focus-visible { outline: 2px solid #2979ff; outline-offset: 2px; }
.article-browser__page[aria-current="page"] { width: 46px; height: 46px; background: #3d525d; color: #fff; }
.article-browser__page:disabled { opacity: .35; cursor: not-allowed; }
.article-browser__page:disabled:hover { color: #363b40; }
.article-browser__page--previous, .article-browser__page--next { width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; color: transparent; }
.article-browser__page--previous { background-image: url("/iwov-resources/sg/ocbc/personal/img/icon_chevron_left.svg"); }
.article-browser__page--next { background-image: url("/iwov-resources/sg/ocbc/personal/img/icon_chevron_right.svg"); }
.article-browser__page--ellipsis { cursor: default; }
.article-browser__empty { padding: 60px 0; font-size: 18px; line-height: 30px; text-align: center; }
.article-browser__mobile-filter { display: none; }
@media (max-width: 1199.98px) { .article-browser__layout { grid-template-columns: 1fr; gap: 30px; } .article-browser__filters { display: none; } .article-browser__mobile-filter { display: block; width: 100%; height: 44px; border: 1px solid #d3dae1; padding: 0 12px; background: #fff; color: #363b40; font: inherit; font-size: 16px; } }
@media (max-width: 767.98px) { .iw_comp1663633861828-grid { padding: 40px 16px 56px; } .article-browser__toolbar { grid-template-columns: 1fr; gap: 14px; } .article-browser__controls { justify-content: space-between; } .article-browser__search.is-open .article-browser__search-field { flex: 1 1 auto; width: auto; margin-right: 10px; } .article-browser__search.is-open .article-browser__search-field input { width: 100%; } .article-browser__featured, .article-browser__cards { grid-template-columns: 1fr; } .article-browser__featured { margin-bottom: 20px; } .article-browser__copy, .article-browser__featured .article-browser__copy { min-height: auto; margin: -42px 16px 0; padding: 24px; } .article-browser__featured .article-browser__title { font-size: 20px; line-height: 30px; } .article-browser__pagination { margin-top: 40px; } }