/* =========================
   TILES
========================= */

.tiles-cluster {
    position: absolute;

    top: clamp(380px, 56vh, 700px);
    left: clamp(800px, 55vw, 1150px);

    width: 1090px;
    aspect-ratio: 1090 / 350;

    transform: translate(-50%, -50%);
}

.tile {
    position: absolute;

    width: 46%;
    height: 43%;

    transform: scale(1);

    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);

    background-size: auto 100%;
    background-position: center;

    overflow: hidden;
    transition: 0.3s ease;
}

.tile-1 {
    top: 0%;
    left: 9%;

    background-image: url("graphics/ui/prog.png");

    transform-origin: bottom right;
}

.tile-2 {
    top: 0%;
    left: 54%;

    background-image: url("graphics/ui/web.png");

    transform-origin: bottom left;
}

.tile-3 {
    top: 57%;
    left: 0%;

    background-image: url("graphics/ui/graph.png");

    transform-origin: top right;
}

.tile-4 {
    top: 57%;
    left: 45%;

    background-image: url("graphics/ui/vid.png");

    transform-origin: top left;
}

.tile-1:hover {
    transform-origin: bottom right;
    transform: translate(4.4%, 0) scale(1.3);
}

.tile-2:hover {
    transform-origin: bottom left;
    transform: scale(1.3);
}

.tile-3:hover {
    transform-origin: top right;
    transform: scale(1.3);
}

.tile-4:hover {
    transform-origin: top left;
    transform: translate(-4.4%, 0) scale(1.3);
}

.tile-frame {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
    pointer-events: none;

    filter:
        drop-shadow(0 0 14px #4bbbbe)
        drop-shadow(0 0 24px #129da1);
}

.tile-frame polygon {
    fill: none;

    stroke: #067275;
    stroke-width: 4;

    vector-effect: non-scaling-stroke;
}


/* ==================================================
   MOBILE - LANDSCAPE
================================================== */

@media (pointer: coarse)
and (orientation: landscape)
and (max-width: 1600px) {

    .tiles-cluster {
        top: 54vh;
        left: 42%;

        width: 60vw;
        max-width: 1090px;

        aspect-ratio: 1090 / 350;

        transform: translate(-50%, -50%);
    }

    .tile-frame {
        filter:
            drop-shadow(0 0 14px #4bbbbe)
    }

    .tile:hover {
        transform: none;
    }

}


/* ==================================================
   MOBILE - PORTRAIT
================================================== */

@media (pointer: coarse)
and (orientation: portrait)
and (max-width: 1600px) {

    .tiles-cluster {
        position: absolute;

        top: 55%;
        left: 50%;

        
        height: 65vh;
        width: 80vw;

        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .tile {
        position: relative;

        width: 65vw;
        height: auto;

        aspect-ratio: 1090 / 350;

        background-size: 100%;
        background-repeat: no-repeat;

        left: auto;
        top: auto;

        transform: none;
    }

    .tile:hover {
        transform: none;
    }

    .tile-frame {
        filter:
            drop-shadow(0 0 10px #129da1);
    }

}