.articles__main-container {
    max-width: 1980px;
}

.articles__aside {
    margin-top: min(28vw, 1365px);
}

.highlighted-article {
    margin: 64px auto;
}

.highlighted-article__img-container {
    position: relative;
    cursor: pointer;
    transition: all 250ms;
}

.highlighted-article__img {
    width: 100%;
    border-radius: 8px;
    aspect-ratio: calc(400 / 265);
}

.articles__img-container:hover,
.highlighted-article__img-container:hover {
    opacity: 0.7;
}
.highlighted-article__right-side {
    max-width: 516px;
}

.highlighted-article__label {
    width: fit-content;
    border-radius: 6px;
    padding: 8px 12px 7px 12px;
    margin-bottom: 16px;
    background-color: var(--design-sys-sec-color__blue--1);
}
.highlighted-article__label p {
    color: var(--design-sys-sec-color__blue--7);
}
.highlighted-article__title-thumbnail {
    margin-bottom: 8px;
    display: inline-block;
}
.highlighted-article__title-thumbnail:hover {
    color: var(--design-sys-sec-color__black);
}

.articles-nav {
    width: calc(100% + 46px);
    margin: 64px -23px 64px !important;
}
.articles-nav--active {
    color: var(--design-sys-sec-color__blue--5) !important;
}

.articles__category:not(:last-child) {
    border-bottom: 1px solid var(--design-sys-sec-color__grey--8);
    padding-bottom: 38px;
}

.articles__category:nth-of-type(4) {
    border-bottom: none;
    padding-bottom: 80px;
}
.design-sys-ad-bottom + .articles__category {
    padding-top: 80px;
}
.articles-categories > * {
    margin-bottom: 16px;
}
.articles-categories > * > :first-child {
    color: var(--design-sys-sec-color__grey--3);
    font: normal normal 500 13px/21px Inter;
}
.articles-categories > .uk-active > a {
    color: var(--design-sys-sec-color__blue--5);
}
.articles-categories > * > a:focus {
    text-decoration: none;
}
.articles-categories > * > a:hover {
    color: var(--design-sys-sec-color__blue--5);
}
.articles-categories > :nth-child(n + 2):not(.uk-first-column)::before {
    border-left-color: var(--design-sys-sec-color__grey--8);
}

.articles-categories li:first-of-type {
    padding-left: 0px;
}

.articles-categories li:first-of-type::before {
    border: none !important;
    margin: 0px;
}

.articles {
    margin: 64px auto;
    gap: 48px;
}

.articles__header {
    margin-bottom: 32px;
}
.articles__title-anchor {
    margin-bottom: 8px;
}
.articles__title {
    text-transform: uppercase;
}
.articles__title::before {
    content: '';
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--design-sys-sec-color__blue--4);
    border-radius: 2px;
    margin-bottom: 2px;
}
.articles__title-btn {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}
.articles__title-btn img {
    filter: invert(56%) sepia(6%) saturate(166%) hue-rotate(191deg) brightness(100%) contrast(94%);
    width: 16px;
}
.articles__title-btn:hover img {
    filter: invert(27%) sepia(7%) saturate(168%) hue-rotate(202deg) brightness(96%) contrast(89%);
}
.articles__title-btn p {
    transition: color 0.25s ease;
    color: var(--design-sys-sec-color__grey--5);
}
.articles__title-btn:hover p {
    color: var(--design-sys-sec-color__grey--3);
    text-decoration: underline;
}
.articles__subtitle {
    color: var(--design-sys-sec-color__grey--5);
}

.article__teaser {
    margin-bottom: 16.5px;
}

/* .articles__list {
    gap: 16px;
} */
.articles__item {
    min-width: 244px;
}
.articles__item > .uk-card {
    height: 100%;
    max-height: 370px;
}
.articles__img-container {
    position: relative;
    margin-bottom: 8px;
    transition: all 250ms;
    cursor: pointer;
    min-height: 133px;
    max-height: 207px;
    overflow: hidden;
}
.articles__img {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: calc(244 / 133);
    object-fit: cover;
    object-position: center;
}
.articles__article-title {
    display: block;
    margin-bottom: 8px !important;
}
.articles__article-title:hover {
    color: inherit;
}

.articles__middle-ad {
    width: 100%;
    height: 276px;
    margin-top: 80px;
}

/* category tabs*/
.articles-breadcrumb {
    margin-bottom: 24px;
}

/* Category container */
.articles-list {
    position: relative;
}
.articles-list > :nth-child(n + 2) {
    border-top-color: var(--design-sys-sec-color__grey--8);
    margin-top: 28px;
    padding-top: 24px;
}
.articles-list > :nth-child(2) {
    margin-top: 24px;
    padding-top: 32px;
}
.articles-list > :last-child {
    border-bottom: 1px solid var(--design-sys-sec-color__grey--8);
    padding-bottom: 28px;
}
.articles-list::before {
    content: '';
    position: absolute;
    top: -11px;
    left: 0px;
    height: 3px;
    width: 48px;
    background-color: var(--design-sys-sec-color__blue--4);
}
.articles-list-header h1 {
    margin-bottom: 8px;
}
.articles-list-header h2 {
    color: var(--design-sys-sec-color__grey--4);
}
.articles-item h2 {
    margin-bottom: 16px;
}
.articles-item a:hover {
    color: var(--design-sys-sec-color__black);
}
.articles-item a:focus {
    color: var(--design-sys-sec-color__black);
}
.articles-item p {
    margin-bottom: 20px;
    margin-top: 0;
}
.articles-item .articles-author {
    margin-right: calc(16px - 5px);
    margin-left: 4px;
}
.articles-item .articles-author + .articles-readtime,
.articles-item .articles-date + .articles-readtime {
    margin-left: calc(16px - 5px);
    padding-left: 16px;
    border-left: 1px solid var(--design-sys-sec-color__grey--8);
}

.articles-item .uk-grid > div:last-child {
    position: relative;
}

.articles-thumbnail {
    border: none;
    width: 244px;
    height: 133px;
    cursor: pointer;
    transition: all 250ms;
    margin-bottom: 0;
    object-fit: cover;
    object-position: center;
}
.articles-thumbnail:hover {
    opacity: 0.7;
}
.design-sys__show-more-btn {
    background: var(--design-sys-sec-color__grey--10);
    border: none;
    border-radius: 8px;
    color: var(--design-sys-sec-color__grey--5);
    font: normal normal 500 16px/21px Inter;
    width: 134px;
    height: 40px;
    padding: 10px 24px;
    margin-bottom: 10px;
    text-transform: none;
}
.design-sys__show-more-btn:not(:disabled):hover {
    background: var(--design-sys-sec-color__grey--9);
    color: var(--design-sys-sec-color__grey--3);
}
.design-sys__show-more-btn:active:focus {
    background: var(--design-sys-sec-color__grey--9);
}

/* Media Queries*/
@media (max-width: 640px) {
    ::-webkit-scrollbar {
        display: none;
    }
    .highlighted-article__right-side {
        padding: 0 !important;
    }
    .articles__header {
        margin-bottom: 0px;
    }
    .articles__item {
        margin-top: 32px !important;
    }
    .articles-categories > * > :first-child {
        color: var(--design-sys-sec-color__grey--3);
        font: normal normal 500 13px/21px Inter;
    }
    .articles-categories > .uk-active > a {
        color: var(--design-sys-sec-color__blue--5);
    }
    .articles-categories > * > a:focus {
        text-decoration: none;
    }
    .articles-categories > * > a:hover {
        color: var(--design-sys-sec-color__blue--5);
    }
    .articles-nav {
        width: 100%;
        margin: 64px 0px 64px !important;
    }
    .articles__img-container {
        max-height: unset;
    }
}
@media (max-width: 430px) {
    .uk-container {
        padding: 0px 16px;
    }
}
@media (min-width: 430px) and (max-width: 1440px) {
    .uk-container {
        padding: 0px 24px;
    }
}
@media (min-width: 1440px) {
    .uk-container {
        padding: 0px 48px;
    }
}

@media (max-width: 867px) {
    .highlighted-article {
        max-height: max-content;
    }
}