/* Container holding the image and the text */
.title-container {
    position: relative;
    text-align: center;
}

/* Centered text for top of page in front of image*/
.title-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.collections-flex-container {
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction
       and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: center;
}

.popular-flex-container {
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction
       and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    overflow-x: auto;
}

.collections-flex-item {
    flex: 1;
    position: relative;
    text-align: center;
}

.collections-image {
    width: 100%;
    object-fit: cover;
    min-width: 200px;
}

.collections-text {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.browse-button {
    background-color: var(--color-cakephp-red);
    color: black;
}