.foto-tiles {
    --w: 480;
    --h: 400;
    --scale: 1;

    position: relative;
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    transform: scale(var(--scale));
    transform-origin: top left;

    margin-inline: auto;
    margin-top: 2rem;
}

a.foto-tile {
    text-decoration: none;
    color: var(--clr-def-95);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.4);
}

a.foto-tile:hover {
    transform: scale(1.05);
    transition: transform .2s ease-in-out;
    z-index: 10;
}

.foto-tile {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    box-shadow: -20px 20px 30px #0003;
    transition: opacity .8s ease-in-out, transform .05s ease-in-out;
    text-transform: lowercase;
}

.foto-tile-3 {
    background: linear-gradient(135deg, hsl(342, 29%, 28%), hsl(342, 29%, 36%));
    width: 128px;
    height: 128px;
    z-index: 5;
    font-size: 1.15rem;
}

.foto-tile-2 {
    background: linear-gradient(135deg, hsl(101, 29%, 28%), hsl(101, 29%, 36%));
    width: 110px;
    height: 110px;
    z-index: 4;
    font-size: 1rem;
}

.foto-tile-1 {
    background: linear-gradient(135deg, hsl(28, 29%, 28%), hsl(28, 29%, 36%));
    width: 90px;
    height: 90px;
    z-index: 3;
    font-size: .85rem;
}

.foto-tile-edinburgh {
    left: 233px;
    top: 0px;
}

.foto-tile-dresden {
    left: 97px;
    top: 136px;
}

.foto-tile-malta {
    left: 233px;
    top: 253px;
}

.foto-tile-darmstadt {
    left: 115px;
    top: 18px;
}

.foto-tile-polen {
    left: 115px;
    top: 271px;
}

.foto-tile-balearen {
    left: 369px;
    top: 253px;
}

.foto-tile-archiv {
    left: 0px;
    top: 135px;
}

.foto-tile-naturaufnahmen {
    left: 351px;
    top: 157px;
}

.foto-tile-index {
    left: 233px;
    top: 136px;
}

@media only screen and (min-width: 1024px) {
    .foto-tiles {
        display: none;
    }
}

@media (max-width: 600px) {
    .foto-tiles {
        --scale: .72;

        width: calc(var(--w) * var(--scale) * 1px);
        height: calc(var(--h) * var(--scale) * 1px);
    }
}