Overlap image & text using CSS grid
body {
background: #d9b19a;
padding: 40px 10vw;
}
.grid-container {
display: grid;
grid-template: repeat(6, [row] 1fr) / repeat(12, [col] 1fr);
grid-gap: 20px;
max-width: 650px;
margin: 0 auto;
overflow: hidden;
min-height: 90vh;
}
.item-1,
.item-2 {
align-items: center;
justify-items: center;
line-height: 1;
color: white;
display: flex;
}
.item-1 {
grid-column: col 2 / span 7;
grid-row: row 2 / span 4;
z-index: 2;
@media (max-width: 700px) {
grid-column: col 2 / span 11;
grid-row: row 1 / span 3;
}
}
.item-2 {
grid-column: col 5 / span 8;
grid-row: row 1 / span 6;
z-index: 1;
@media (max-width: 700px) {
grid-column: col 1 / 14;
grid-row: row 2 / 7;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.95);
visibility: hidden;
max-height: calc(90vh - 40px);
@media (max-width: 700px) {
height: 100%;
max-height: 100%;
}
}
h1 {
font-size: 3rem;
font-family: termina, sans-serif;
text-transform: lowercase;
overflow: hidden;
display: block;
line-height: 1.1;
span {
visibility: hidden;
}
}
