HTML & CSS: 2 Column GRID

HTML

<div class="kuechenwelten">

    <div class="you-coulmn-hover">
        <a href="/kuechen/kuechenwelten/designerkuechen">
            <div class="overlay-you"></div>
            <img src="/wp-content/uploads/kuechenwelten-grid-01-designerkuechen-desktop.jpg">
        </a>
        <h3 class="overlay-heading">Designerküchen</h3>
    </div>

    <div class="you-coulmn-hover">
        <a href="/kuechen/kuechenwelten/landhauskuechen">
            <div class="overlay-you"></div>
            <img src="/wp-content/uploads/kuechenwelten-grid-02-landhauskuechen-desktop.jpg">
        </a>
        <h3 class="overlay-heading">Landhausküchen</h3>
    </div>

    <div class="you-coulmn-hover">
        <a href="/kuechen/kuechenwelten/echtholzkuechen">
            <div class="overlay-you"></div>
            <img src="/wp-content/uploads/kuechenwelten-grid-03-echtholzkuechen-desktop.jpg">
        </a>
        <h3 class="overlay-heading">Echtholzküchen</h3>
    </div>

    <div class="you-coulmn-hover">
        <a href="/kuechen/kuechenwelten/singlekuechen">
            <div class="overlay-you"></div>
            <img src="/wp-content/uploads/kuechenwelten-grid-04-singlekuechen-desktop.jpg">
        </a>
        <h3 class="overlay-heading">Singleküchen</h3>
    </div>

    <div class="you-coulmn-hover">
        <a href="/kuechen/kuechenwelten/outdoorkuechen">
            <div class="overlay-you"></div>
            <img src="/wp-content/uploads/kuechenwelten-grid-05-outdoorkuechen-desktop.jpg">
        </a>
        <h3 class="overlay-heading">Outdoorküchen</h3>
    </div>

    <div class="you-coulmn-hover">
        <a href="/kuechen/kuechenwelten/mehr-als-nur-kuechen">
            <div class="overlay-you"></div>
            <img src="/wp-content/uploads/kuechenwelten-grid-06-mehr-als-kuechen-desktop.jpg">
        </a>
        <h3 class="overlay-heading">Mehr als Küchen</h3>
    </div>

</div>

CSS

.kuechenwelten {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px;
}
.you-coulmn-hover {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: ease-in .5s;
}
.overlay-you {
    display: none;
    background-color: rgb(255 255 255 / 25%);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
}