.article {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    text-decoration: none;
}

.article.uitgelicht {

}

.article.uitgelicht .article-body {
    padding: .5rem;
}

.article img {
    height: 240px;
    width: 100%;
    object-fit: cover;
}

#main-search-bar-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #E3F0FC;
    box-shadow: none;
    margin-left: calc(-0.75rem - 10px);
    padding-left: calc(0.75rem + 10px);
    width: calc(100% + 0.75rem + 10px);
    border-top-left-radius: 0;
    border-left: 10px solid #A5CFF6;
}

#main-search-bar-container input {
    background: white;
    border-color: white;
}

.test-border-class {
    display: grid;
    grid-template-columns: 10px 10px auto 10px 10px;
    grid-template-areas: "shadow shadow shadow . .";
}

.test-shadow-class {
    display: grid;
    grid-template-columns: 10px 10px auto;
    grid-template-areas: "border-left bg-white body";
    grid-area: shadow;
    border-radius: 0 0 1rem 0;
}

.test-border-left {
    background: #D1E6FA;
    grid-area: border-left;
}

.test-bg-white {
    grid-area: bg-white;
    background: white;
}

.test-border-container {
    grid-area: body;
    background: white;
    border-radius: 0 1rem 1rem 0;
    padding: 2rem 2rem 2rem .75rem;
}

@media (min-width : 768px) {
    .test-border-class {
        margin-top: -4rem;
        grid-template-columns: 20px 20px 7fr 5fr 20px 20px;
        grid-template-areas: "shadow shadow shadow . . .";
    }

    .test-shadow-class {
        grid-template-columns: 20px 20px auto;
        grid-template-areas: "border-left bg-white body";
    }

    #main-search-bar-container {
        margin-left: -3rem;
        padding-left: 5rem;
        width: calc(100% + 3rem);
        border-left: none;
        border-top-left-radius: 1rem;
    }
}

@media (min-width : 992px) {
    .test-border-class {
        grid-template-columns: 50px 70px 7fr 5fr 50px 70px;
        grid-template-areas: "shadow shadow shadow . . .";
    }

    .test-shadow-class {
        grid-template-columns: 50px 70px auto;
        grid-template-areas: "border-left bg-white body";
    }
}

@media (min-width : 1400px) {
    .test-border-class {
        grid-template-columns: 80px 80px 7fr 5fr 80px 80px;
        grid-template-areas: "shadow shadow shadow . . .";
    }

    .test-shadow-class {
        grid-template-columns: 80px 80px 1fr;
        grid-template-areas: "border-left bg-white body";
    }
}

@media (min-width : 1656px) {
    .test-border-class {
        grid-template-columns: 80px 80px auto calc(1320px / 12 * 7) calc(1320px / 12 * 5) auto 80px 80px;
        grid-template-areas: "shadow shadow shadow shadow . . . .";
    }

    .test-shadow-class {
        grid-template-columns: 80px 80px auto calc(1320px / 12 * 7);
        grid-template-areas: "border-left bg-white bg-white body";
    }
}