:root {
    --primary-red: rgb(255, 0, 53);
    --secondary-red: rgba(165, 21, 50, 0.173);
    --light-red: rgb(255, 224, 230);
    --light-red2: rgb(255, 169, 186);
    --dark-red: rgb(229, 130, 130);
    --light-green: rgb(222, 253, 208);
    --light-gray: rgb(215, 215, 215);
    --black: #1d1d1d;
    --dark-gray: #8e8e8e;
}

* {
    font-family: 'Poppins', sans-serif;
}

.red {
    color: var(--primary-red);
}

.light-red {
    color: var(--light-red2);
}

.white {
    color: white;
}

.black {
    color: var(--black);
}

.bento-grid .col {
    gap: 1rem;
    height: 100%;
    align-items: start;
    justify-content: space-between;
}

.bento-grid-section {
    /* To position the pseudo-element */
    max-width: 1100px;
    position: relative;
    width: 100%;
    background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0px;
    margin: 5rem 0 0 0;

    font-weight: 800;
    font-style: italic;
}

.background-shape {
    position: absolute;
    top: -90%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Place behind the content */
}

.bento-grid {
    max-width: 1100px;
    width: 100%;
    display: grid;
    align-self: center;
    grid-template-columns: 1.5fr repeat(8, 1fr);
    gap: 1rem;
    position: relative;
}

.bento-grid p {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0px;
    text-align: left;
    font-style: normal;
}

.bento-grid p.italic {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0px;
    text-align: left;
    font-style: italic;

}

.bento-grid h2 {
    margin: 0px;
    text-align: left;
    font-style: normal;
    font-weight: 700;
}

.bento-item {
    position: relative;
    border-radius: 10px;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: start;
    text-align: left;
    box-sizing: border-box;
    height: 100%;
    background-color: var(--light-gray);
    padding: 2rem;
    overflow: hidden;

}

.bento-item-link:hover {
    cursor: pointer;
    filter: drop-shadow(0px 0px 5px rgb(255, 0, 34));
}

.bento-item-title.bento-item-link:hover {}




/* Normal Bento Items */
.bento-item-normal {
    background: var(--light-gray);
    color: var(--black);
}

.bento-item-image {
    padding: 0px;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Image Bento Items */
.bento-item-image img,
.bento-item img {
    width: 100%;
    object-fit: contain;
    z-index: 1;
}

/* Text Only Bento Items (No Background) */
.bento-item-text {
    background: none;
    color: var(--primary-red);
    font-size: 1.2rem;
    text-align: center;
}

.bento-item-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0px;
    padding: 2rem;
    color: white;
    z-index: 0;
    background-color: var(--primary-red);
    background-color: rgb(254, 56, 62);
}

.bento-item-title p {
    color: white;
    z-index: 1;
}

.bento-item-title h3 {
    width: 100%;
    z-index: 1;
    color: white;
    font-size: calc(1.3rem + 1vmin);
    margin: 0;
    text-align: center;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

.bento-item-title img {
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    filter: grayscale(100%) saturate(20) contrast(1.2) brightness(1.3) blur(0.4px);
}

.bento-item-title .xblur {
    filter: grayscale(100%) saturate(20) contrast(1.2) brightness(1.3) blur(0.8px);
}

.bento-item-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    mix-blend-mode: screen;
    z-index: 3;
}

/* Catch Phrase Styling */
.bento-item-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
    line-height: 4rem;
    gap: 10px;
}

.bento-item-figure p {}

.bento-item-figure .figure-number {
    font-size: calc(2rem + 1vmin);
    display: block;
    font-style: italic;
}

.bento-item-figure .figure-text {}

/* Gray Background Bento Items */
.bento-item-gray {
    background: var(--dark-gray);
    color: white;
}

.bento-item-red {
    background: var(--light-red);
    color: black;
}

.bento-item-dark-red {
    background: var(--dark-red);
    color: white;
}

.bento-item-green {
    background: var(--light-green);
    color: black;
}

.bento-item-black {
    background: var(--black);
}

.bento-item-transparent {
    background: transparent;
}

.bento-button {
    padding: 0px;
    overflow: visible;
}


.bento-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) saturate(1);
}


@media (max-width: 900px) {
    .bento-grid-section {
        width: 100%;
        margin: 0;
    }

    .bento-grid {
        grid-template-columns: 1fr 1fr !important;
        padding: 0;
    }

    .bento-item.L {
        grid-column: span 2 !important;
    }

    .bento-item.M {
        grid-column: span 2 !important;
    }

    .bento-item.S {
        grid-column: span 1 !important;
    }

    .bento-item.XS {
        display: none;
    }

    .bento-item.M.bento-button {}

    /* Ensure rows adjust dynamically */
    .bento-item {
        grid-column: span 2 !important;
        grid-row: auto !important;
    }

    .bento-item-title {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    .bento-item-title img {}

    #methode-target {}


    #dumental {
        order: 1 !important;
    }

    #dumental * {
        font-size: calc((2 - 1) * calc(0.012 * min(100vh, 900px)) + 1rem);
    }

    #rebranchez {
        order: 12 !important;
        grid-row: span 4 !important;
        min-height: 300px;
    }

    #cover {
        order: 0 !important;
        grid-row: span 2 !important;
    }

    #accompagnees {
        order: 11 !important;
        grid-row: span 2 !important;
    }

    #methode-target {
        order: 6 !important;
        grid-row: span 2 !important;
    }

    #grintacademie {
        order: 8 !important;
        grid-row: span 2 !important;
    }

    #methode-disc {
        order: 9 !important;
        grid-row: span 2 !important;
    }

    #qualiopi {
        order: 13 !important;
        grid-row: span 2 !important;
    }

    #bento-button {
        order: 14 !important;
    }

    #prepa {
        order: 4 !important;
    }
}