section {
    display: grid;
    grid-template-rows: 10% 60% 30%;
    grid-template-columns: 20% 60% 20%;
    justify-items: center;
    align-items: center;
}

.img {
    grid-row: 2/3;
    grid-column: 2/3;
    height: 90%;
    width: 100%;    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s linear;
}

#img_1 {
    background-image: url(../medien/bird-4k.jpg);
}

#img_2 {
    background-image: url(../medien/earth-4k.jpg);
}

#img_3 {
    background-image: url(../medien/landscape_01.jpg);
}

#img_4 {
    background-image: url(../medien/landscape_02.jpg);
}

#img_5 {
    background-image: url(../medien/herbst_01.jpg);
}

.btn {
    height: 2em;
    width: 1.5em;
    text-align: center;
    line-height: 2;
    font-size: 400%;
    border-radius: 2em;
    cursor: pointer;
    transition: all 1s linear;
    font-family: monospace;
}

.btn:hover {
    background-color: rgba(100,0,200,0.2);
}

#forward {
    grid-row: 2/3;
    grid-column: 3/4;
}

#backward {
    grid-row: 2/3;
    grid-column: 1/2;
}

.con_dot {
    position: absolute;
    top: 67%;
    display: flex;
}

.dot {
    height: 1.5em;
    width: 1.5em;
    border-radius: 1.5em;
    margin: 0.5em;            
    background-color: rgba(20, 20, 20, 0.2);
    transition: all 0.5s linear;
    cursor: pointer;
}

.dot:hover {
    transform: scale(140%);
}

.active {
    background-color: rgba(20, 20, 20, 0.6);
}

.hidden {
    opacity: 0;
}

@media screen and (max-width: 600px) {

    .con_dot {
        top: 52%;
    }
    
}