.popup__reset {
    position: absolute;
    display: none;
}

.popup {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.popup__anchor {
    position: absolute;
    display: none;
}

.popup__closer {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: all;
    /* hide the text */
    color: Transparent;
}

.popup__content {
    position: fixed;
    z-index: 20;
    background: white;
    display: none;
    padding: 1em;
    top: 1em;
    left: 5%;
    right: 5%;
    bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 0.6em;
    pointer-events: all;
    overflow: auto;
}

.popup__anchor:target ~ .popup__content {
    display: block;
}

.popup__anchor:target ~ .popup__closer {
    display: block;
}

@media only screen and (min-width: 48em) {
    .popup__content {
        position: absolute;
        right: unset;
        bottom: unset;
    }

    #school ~ .popup__content {
        left: 20%;
        top: 40%;
    }

    #foto1 ~ .popup__content {
        left: 16%;
        bottom: 44%;
        top: auto;
    }

    #foto2 ~ .popup__content {
        left: 18%;
        bottom: 42%;
        top: auto;
    }

    #foto3 ~ .popup__content {
        left: 23%;
        top: 40%;
    }

    #foto4 ~ .popup__content {
        left: 28%;
        top: 43%;
    }

    #foto5 ~ .popup__content {
        left: 22%;
        bottom: 40%;
        top: auto;
    }

    #foto6 ~ .popup__content {
        left: 28%;
        bottom: 36%;
        top: auto;
    }

    #foto7 ~ .popup__content {
        left: 34%;
        top: 46%;
    }

    #foto8 ~ .popup__content {
        left: 32%;
        bottom: 33%;
        top: auto;
    }

    #foto9 ~ .popup__content {
        left: 37%;
        top: 47%;
    }

    #foto10 ~ .popup__content {
        left: 41%;
        top: 49%;
    }

    #foto11 ~ .popup__content {
        left: 43%;
        top: 56%;
    }

    #foto12 ~ .popup__content {
        left: 44%;
        bottom: 27%;
        top: auto;
    }

    #foto13 ~ .popup__content {
        right: 51%;
        bottom: 37%;
        left: auto;
        top: auto;
    }

    #foto14 ~ .popup__content {
        right: 42%;
        bottom: 28%;
        left: auto;
        top: auto;
    }

    #foto15 ~ .popup__content {
        right: 45%;
        bottom: 42%;
        left: auto;
        top: auto;
    }

    #foto16 ~ .popup__content {
        right: 38%;
        bottom: 44%;
        left: auto;
        top: auto;
    }

    #foto17 ~ .popup__content {
        right: 42%;
        top: 52%;
        left: auto;
    }

    #foto18 ~ .popup__content {
        right: 38%;
        top: 44%;
        left: auto;
    }

    #foto19 ~ .popup__content {
        right: 34%;
        bottom: 37%;
        left: auto;
        top: auto;
    }

    #foto20 ~ .popup__content {
        right: 35%;
        top: 40%;
        left: auto;
    }

    #foto21 ~ .popup__content {
        right: 30%;
        bottom: 43%;
        left: auto;
        top: auto;
    }

    #foto22 ~ .popup__content {
        right: 27%;
        top: 51%;
        left: auto;
    }

    #foto23 ~ .popup__content {
        right: 32%;
        top: 34%;
        left: auto;
    }

    #foto24 ~ .popup__content {
        right: 30%;
        top: 31%;
        left: auto;
    }

    #foto25 ~ .popup__content {
        right: 28%;
        top: 26%;
        left: auto;
    }

    #foto26 ~ .popup__content {
        right: 20%;
        top: 39%;
        left: auto;
    }
    
    #foto27 ~ .popup__content {
        right: 25%;
        top: 22%;
        left: auto;
    }
}