.gl-articles {
    display: flex;
    flex-direction: column;

    grid-row-start: 5;
    grid-row-end: span 1;
    grid-column-start: 1;
    grid-column-end: -1;

    padding: 4rem 32px;

    background: #3669BF;
}

#gl-articles-subtitle {
    color: #d6dbe6 !important;
}

.gl-article-cards-container {
    display: flex;
    flex-direction: column;
    row-gap: 3rem;

    margin-top: 4rem;
    margin-bottom: 2rem;
}

.gl-article-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);;

    color: var(--gl-color-alt);
    background-color: #f3f5f6;
}

.gl-article-card > img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: 40% 40%;
}

.gl-article-card > div {
    flex-grow: 1;
    padding: 1.2rem 1rem;
}

.gl-article-card > div > h3 {
    margin: 0;
    padding: 0;

    color: #ae2331;
    font-size: 1.65rem;
}

.gl-article-card > div > p {
    margin: 0;
    padding: 1.55rem 0;
}

.gl-article-card > a {
    display: inline-block;
    width: fit-content;

    margin: 0 1rem 1.2rem 1rem;
    padding: 0.65rem 1.5rem;

    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    text-align: center;
    text-decoration: none;

    color: white;
    background-color: black;

    outline: none;
    border-width: 0;
    border-color: transparent;
    border-style: solid;
    border-radius: 0;

    cursor: pointer;

    transition: all 250ms ease-in-out;
}

.gl-article-card > a:hover {
    background-color: #404040;
}

.gl-article-card > a:active {
    background-color: #ae2331;
}

/* WIDTH BREAKPOINTS ------------------------------------------------------------------------------------------------ */
/* sm */
@media (min-width: 640px) {
}

/* md */
@media (min-width: 768px) {
}

/* lg */
@media (min-width: 1024px) {
}

/* xl */
@media (min-width: 1280px) {
}

/* 2xl */
@media (min-width: 1536px) {
    .gl-articles {
        padding: 4rem 16rem;
    }

    .gl-article-cards-container {
        flex-direction: row;
        column-gap: 2rem;
    }

    .gl-article-card {
        flex: 1 1 200px;
    }
}

/* 3xl */
@media (min-width: 1800px) {
}

/* 4xl */
@media (min-width: 2200px) {
}