main, /* main takes up enough space to fill whole page*/
#filter-container > *:not(#filter-posts),
.flex-mosaic > a {
    flex: 1; 
}

main > *:not(.breadcrumbs, .blog-section), 
.container-mosaic {
    padding: 0.5rem;
}

#filter-items-btn {
    font-family: var(--ff-primary);
    font-size: var(--fs-500);
    color: var(--clr-primary-400);
    border: none;
    background: none;
}
#filter-items-btn > span {
    margin-right: 0.5em;
    font-size: smaller;
    display: none;
}

#filter-items-btn:hover {
    cursor: pointer;
    color: var(--clr-primary-400-lighter);
}

#filter-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    transform-origin: top;
    height: auto;
    max-height: 0px;
    scale: 1 0;
    transition: all 200ms ease;
}

#filter-container.open {
    max-height: 40vh;
    scale: 1 1;

}

#input-search {
    flex: 2;
    max-width: 40ch;
    min-width: 20ch;
}

#filter-posts {
    padding: 0.5em 1em;
    font-size: var(--fs-300);
    margin-inline: auto;
}

.blog-section {z-index: 1;}

.container-mosaic {
    --gap: 1rem;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap);
    max-width: var(--max-width-1000);
    height: fit-content;
    margin-inline: auto;
    margin-block: 1rem;
}

.flex-mosaic {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: min(100vw, 150px);
    flex: 1;
}

.tile {
    flex: 1;
    height: 100%;
    background-color: var(--clr-secondary-1000);
    color: white;
    border: 2px solid var(--clr-primary-200);
    max-height: 450px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tile__img {
    background: url(../assets/images/stock-photo-coffee-in-blue-cup-on-wooden-table-in-cafe-with-lighting-background-1387420256.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    flex: 1;
    min-height: 20%;
    aspect-ratio: 3 / 2;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.tile__title {
    padding: 7.5%;
    border-top: 2px solid var(--clr-primary-200);
}

.tile__title h2 {
    --responsiveFont: clamp(14px, 2.5vw + 0.5rem, var(--fs-500));
    margin: 0;
    font-size: var(--responsiveFont);
}

.tile--big {flex: 8;}
.tile--small {flex: 5;}

.featured-post {
    display: flex;
    flex-flow: row wrap;
    background: var(--clr-primary-200);
    width: 100%;
    max-width: var(--max-width-1000);
    min-height: 200px;
    margin-block: 2rem;
    margin-inline: auto;
}

.featured-post__img {
    aspect-ratio: 16/9;
    flex: 2 3;
    background-size: cover;
    background-position: 35% 50%;
    min-width: min(100vw, 300px);
}

.featured-post__text {
    flex: 3 1;
    display: flex;
    flex-direction: column;
    justify-content: center ;
    padding: 1em;
    min-width: min(100vw, 350px);
}

.featured-post__text > * {
    margin: 0;
    word-wrap: break-word; /* ensures it doesn't overflow on smaller devices */
}

#view-more {
    /* position: absolute; */
    display: flex;
    justify-content: center;
    opacity: 1;
    font-size: var(--fs-500);
    /* background: linear-gradient(0deg, #FFF8F5FF 70%, #FFF8F500 100%); */
    background: var(--clr-secondary-100);
    width: 100%;
    height: 20vh;
    transition: top 500ms ease-in, opacity 5000ms ease-out;
}

.view-more-clickhandler {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform-origin: top;
    gap: 0;
}

.bounce-arrow {
    cursor: pointer;
}

.bounce-arrow .fa-solid{
    animation: bounce-arrow 850ms ease-in-out infinite alternate ;
}

@keyframes bounce-arrow {
    0% {}
    100% {margin-top: 1em;}
}


@media only screen and (min-width: 769px) {
    .tile__img {
        aspect-ratio: 20 / 9;
    }
    #filter-items-btn > span {display: inline;}
}