/**
 * Note: This is the style of the interactive components in the page
 */

/* 📱 Computers */
.ai-gallery {
    --on-row: 6;
    --gap: 0;
    --aspect: 1.61;
    --scale: 3;
}

@media only screen and (max-width: 1200px) {
    /* 📱 Tablets */

    .ai-gallery {
        --on-row: 3;
        --gap: 2px;
        --aspect: 1;
        --scale: 3;
    }
}

@media only screen and (max-width: 600px) {
    /* 📱 Big smartphones */

    .ai-gallery {
        --on-row: 2;
        --gap: 2px;
        --aspect: 1;
        --scale: 4;
    }
}

@media only screen and (max-width: 425px) {
    /* 📱 Small smartphones */

    .ai-gallery {
        --on-row: 2;
        --gap: 3px;
        --aspect: 1.61;
        --scale: 1.5;
    }
}

/*------------------------*/

.ai-gallery,
.ai-gallery * {
    transition: all 0.2s ease-in-out;
}

.ai-gallery-items {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    height: calc(100vw * var(--aspect) * 6 / var(--on-row) / var(--on-row)); /* <- [🥼]*/
    margin-bottom: 20px;
}

.ai-gallery-items .inner {
    /*/
    outline: 1px dotted rgb(38, 255, 38);
    /**/

    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 0;
    /*margin-left: -50px;*/

    display: grid;
    grid-template-columns: repeat(var(--on-row), 1fr);
    grid-gap: var(--gap);
}

.ai-gallery-items .inner > * {
    /*/
    outline: 1px dotted rgb(0, 255, 55);
    /**/

    width: 100%;
    aspect-ratio: 1 / var(--aspect);
}

.ai-gallery-items .inner a {
    /*/
    outline: 1px dotted rgb(28, 80, 28);
    /**/

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: clip;
}

.ai-gallery-items .inner a iframe {
    /*/
    outline: 1px dotted rgb(58, 58, 255);
    /**/

    pointer-events: none;

    width: calc(100% * var(--scale));
    height: calc(100% * var(--scale));
    transform: scale(calc(1 / var(--scale)));
    transform-origin: 50% 50%;
}

.ai-gallery .placeholder {
    overflow: hidden;
    background: #000;
    position: relative;

    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ai-placeholder-animate;
    background: #f6f7f8;
    background: linear-gradient(to right, #eee 2%, #ccc 18%, #eee 33%);
    background-size: 1300px;
}

@keyframes ai-placeholder-animate {
    0% {
        background-position: -650px 0;
    }
    100% {
        background-position: 650px 0;
    }
}