.image_gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1.5rem;
    grid-template-areas: 'img1 img2 img3 img3'
                         'img1 img4 img5 img6'
                         'img7 img7 img8 img6'
                          ;
}

.image_gallery a{
    width: 100%;
    height: 25rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.image_gallery a ion-icon{
    color: rgba(255, 255, 255, .6);
    font-size: 3rem;
    position: relative;
    z-index: 100;
    padding: 1rem 3rem;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: .4rem;
    opacity: 0;
    transition: opacity .5s;


}

.image_gallery a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity .5s;
}

.image_gallery a:hover i,
.image_gallery a:hover::before{
    opacity: 1;

}

.img1{
    grid-area: img1;
    min-height: 51.5rem;
    background-image: url("../img2/1 (1).jpg");
}
.img2{
    grid-area: img2;
    background-image: url("../img2/1 (2).jpg");
}
.img3{
    grid-area: img3;
    background-image: url("../img2/1 (3).jpg");
}
.img4{
    grid-area: img4;
    background-image: url("../img2/1 (4).jpg");
}
.img5{
    grid-area: img5;
    background-image: url("../img2/1 (5).jpg");
}
.img6{
    grid-area: img6;
    min-height: 51.5rem;
    background-image: url("../img2/1 (6).jpg");
}
.img7{
    grid-area: img7;
    background-image: url("../img2/1 (7).jpg");
}
.img8{
    grid-area: img8;
    background-image: url("../img2/1 (8).jpg");
}
.headline{
    text-align: center;
    margin: 2rem;
}
@media screen and (max-width: 600px){
    .image_gallery{
        grid-template-areas: 'img1 img1 img2 img2'
                         'img1 img1 img3 img3'
                         'img4 img4 img5 img5'

                         'img6 img7 img7 img7'
                         'img8 img8 img8 img8'
                          ;
    }
    .image_gallery a{
        height: 20rem;
    }

    .img1{
        min-height: 41.5rem;
    }
    .img6{
        min-height: 20rem;
    }

}

@media screen and (max-width: 386px){
    .image_gallery{
        grid-template-areas: 'img1 img1 img1 img1'
                         'img2 img2 img2 img2'
                         'img3 img3 img3 img3'
                         'img4 img4 img4 img4'
                         'img5 img5 img5 img5'
                         'img6 img6 img6 img6'
                         'img7 img7 img7 img7'
                         'img8 img8 img8 img8'
                          ;
    }
    .image_gallery a,
    .img6,
    .img1{
        min-height: 30rem;
        height: 30rem;
    }


}