.text-container, .container {
    /* If you want 900px of content PLUS the 200px odmik, use 1100px here */
    /* If you want the whole thing to stay within 900px, keep it 900px */
    max-width: 1100px; 
    
    margin-left: 0;    /* Remove centering */
    margin-right: auto;
    
    /* Remove the old 20px padding if you want it to sit flush 
       with other .odmik elements */
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* Grid layout remains the same */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 2. Image Container Setup */
.image-container {
    position: relative; /* Required for the overlay to sit on top */
    overflow: hidden;   /* Keeps the overlay inside the bounds */
    line-height: 0;     /* Removes extra space below images */
}

.image-container img {
    width: 100%;        /* Image fills the container */
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Subtle zoom effect */
}

/* 3. The Overlay (Hidden by default) */
.overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent veil */
    color: white;
    font-family: "Droid Serif", serif;
    letter-spacing: 3px;
    
    /* Centering the text */
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 0; /* Hide initially */
    transition: opacity 0.4s ease;
}

/* 4. Mouse Over Effects */
.image-container:hover .overlay-text {
    opacity: 1; /* Show overlay */
}

.image-container:hover img {
    transform: scale(1.05); /* Slight zoom for interaction */
}

/* Responsive: One column on mobile phones */
@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
    }
}