#dreixdrei {
margin-right: auto;
margin-left: auto;
}

.image {
position: relative;
width: 100%;
max-width: 380px;
}

.image__overlay {
color: #ffffff;
display: flex;
position: absolute;
width: 100%;
height: 100%;
max-width: 380px;
top: 0;
left: 0;
background: rgba(244, 143, 2, 0.8);
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 1.00s;
}

@media (min-width: 840px) {
#dreixdrei {
display: grid;
max-width: 1140px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

#dreixdrei_eintrag1 {
grid-area: 1 / 1 / 2 / 2;
}

#dreixdrei_eintrag2 {
grid-area: 1 / 2 / 2 / 3;
}

#dreixdrei_eintrag3 {
grid-area: 1 / 3 / 2 / 4;
}

#dreixdrei_eintrag4 {
grid-area: 2 / 3 / 3 / 4;
}

#dreixdrei_eintrag5 {
grid-area: 2 / 2 / 3 / 3;
}

#dreixdrei_eintrag6 {
grid-area: 2 / 1 / 3 / 2;
}

#dreixdrei_eintrag7 {
grid-area: 3 / 1 / 4 / 2;
}

#dreixdrei_eintrag8 {
grid-area: 3 / 2 / 4 / 3;
}

#dreixdrei_eintrag9 {
grid-area: 3 / 3 / 4 / 4;
}
}

@media (min-width: 560px) and (max-width: 839px) {
.image {
position: relative;
width: 100%;
max-width: 380px;
}

.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 380px;
height: 100%;
background: rgba(244, 143, 2, 0.8);
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 1.00s;
}

#dreixdrei {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

#dreixdrei_eintrag1 {
grid-area: 1 / 1 / 2 / 2;
}

#dreixdrei_eintrag2 {
grid-area: 1 / 2 / 2 / 3;
}

#dreixdrei_eintrag3 {
grid-area: 2 / 1 / 3 / 2;
}

#dreixdrei_eintrag4 {
grid-area: 2 / 2 / 3 / 3;
}

#dreixdrei_eintrag5 {
grid-area: 3 / 1 / 4 / 3;
}

#dreixdrei_eintrag6 {
grid-area: 4 / 1 / 5 / 2;
}

#dreixdrei_eintrag7 {
grid-area: 4 / 2 / 5 / 3;
}

#dreixdrei_eintrag8 {
grid-area: 5 / 1 / 6 / 2;
}

#dreixdrei_eintrag9 {
grid-area: 5 / 2 / 6 / 3;
}
}

@media (max-width: 559px) {
{
.image {
position: relative;
width: 360px;
}

.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 360px;
height: 100%;
background: rgba(244, 143, 2, 0.8);
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 1.00s;
}
}