/*  COMPONENT: HEXAGONAL GRID
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .hex {
        display: flex;
        --s: 9.5rem; /* size  */
        --m: 0px; /* margin */
        --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
        margin-bottom: 3rem;
    }

    @media (max-width: 720px) {
        .hex {
            --s: 25vw;
        }
    }
    @media (max-width: 480px) {
        .hex {
            --s: 50vw;
        }
    }

    .hex-container {
        font-size: 0; /*disable white space between inline block element */
    }

    .hex-container div,
    .hex-container a {
        width: var(--s);
        margin: var(--m);
        height: calc(var(--s) * 1.1547);
        display: inline-block;
        font-size: initial;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        margin-bottom: calc(var(--m) - var(--s) * 0.2885);
        position: relative;
        background-size: 100%;
        background-position: center;
    }

    .hex-container::before {
        content: "";
        width: calc(var(--s) / 2 + var(--m));
        float: left;
        height: 120%;
        shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
    }

    .hex-container h3 {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        text-align: center;
        font-size: var(--font-size-m);
        line-height: 1.27777rem;
    }

    .hex-container h3 span {
        width: fit-content;
        background-color: rgba(255, 255, 255, 0.8);

        padding: 0 0.5rem;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }
    .hex-container h3 {
        opacity: 0;
        transform: translateY(-1rem) scale(0.9);
        transition: opacity 0.3s, transform 0.3s, color 0.3s;
    }
    @media (max-width: 720px) {
        .hex-container h3 {
            opacity: 1;
            bottom: 0;
            left: 0;
            right: 0;
            margin-bottom: 2rem;
        }
    }
    .hex-container a:hover h3 {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 0.3s, transform 0.3s, color 0.3s;
    }

    .hex-container .item-1 {
        background-image: url("/wp-content/uploads/2023/11/1-1024x1024.png");
    }
    .hex-container .item-2 {
        background-image: url("/wp-content/uploads/2024/02/9-1024x1024-1.png");
    }
    .hex-container .item-3 {
        background-image: url("/wp-content/uploads/2023/11/3-1024x1024.png");
    }
    .hex-container .item-4 {
        background-image: url("/wp-content/uploads/2023/11/4-1024x1024.png");
    }
    .hex-container .item-5 {
        background-image: url("/wp-content/uploads/2023/11/5-1024x1024.png");
    }
    .hex-container .item-6 {
        background-image: url("/wp-content/uploads/2023/11/6-1024x1024.png");
    }
    .hex-container .item-7 {
        background-image: url("/wp-content/uploads/2023/11/7-1024x1024.png");
    }
    .hex-container .item-8 {
        background-image: url("/wp-content/uploads/2023/11/8-1024x1024.png");
    }
}