.title-category-pictogram {
    padding: 1.25rem 1.25rem;
    border-radius: 1rem;
    color: white;
}

.title-category-pictogram img {
    height: 60px;
    filter: brightness(0) invert();
}

#main-search-bar-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #E3F0FC;
    box-shadow: none;
    width: 480px;
}

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

.test-border-class {
    margin-top: -4rem;
    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 1rem 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) {
    .title-category-pictogram {
        padding: 1.5rem 1.5rem;
    }

    .title-category-pictogram img {
        height: 70px;
        filter: brightness(0) invert();
    }

    .test-border-class {
        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";
    }
}

@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";
    }
}