.promo-banner-link {
    text-decoration: none; /* Poistaa linkkien alleviivaukset */
    color: inherit; /* Varmistaa, että teksti perii värin */
    display: block; /* Varmistaa, että linkki käyttäytyy lohkoelementin tavoin */
}

.promo-banner-link:hover .promo-banner-title,
.promo-banner-link:hover .promo-banner-text {
    color: var(--highlight-1);
}

.promo-banner-link .promo-banner-title,
.promo-banner-link .promo-banner-text {
    color: var(--main-2);
}

.promo-banner {
    display: flex;
    flex-direction: column; /* Oletus mobiilille: allekkain */
    align-items: center;
}

.promo-banner-image-container {
    flex-shrink: 0; /* Estää kuvan kutistumisen */
}

.promo-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.promo-banner-img.narrow {
    display: none; /* Piilotettu oletuksena */
}

.promo-banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Pystysuuntainen keskitys */
    padding: 1rem;
    width: 100%;
}

.promo-banner-title {
    text-align: center;
    font-size: 2.8rem; /* Suurennetaan otsikon fonttia */
    margin-bottom: 1rem; /* Väli otsikon ja tekstin väliin */
}

.promo-banner-text {
    text-align: center;
    font-size: 1.4rem; /* Suurennetaan leipätekstin fonttia */
    line-height: 1.6; /* Parannetaan luettavuutta rivivälillä */
}

.promo-banner-text p {
    margin-bottom: 1em; /* Lisätään väliä kappaleiden väliin */
}

/* Mobiilinäkymä: näytetään kapea kuva ja piilotetaan leveä */
@media (max-width: 800px) {
    .promo-banner-img.wide { display: none; }
    .promo-banner-img.narrow { display: block; }
}

/* Leveä näyttö: kuva vasemmalla, teksti oikealla */
@media (min-width: 801px) {
    .promo-banner {
        flex-direction: row; /* Asetetaan elementit vierekkäin */
        align-items: center; /* Keskitetään sisältö pystysuunnassa */
        gap: 2rem; /* Lisätään väli kuvan ja tekstin väliin */
    }
    .promo-banner-image-container {
        flex: 1 1 40%; /* Annetaan kuvan viedä tilaa, mutta ei kasva loputtomiin */
        max-width: 500px; /* Asetetaan kuvalle maksimileveys */
    }
    .promo-banner-content {
        flex: 1 1 60%; /* Annetaan tekstin viedä lopputila */
    }

    /* Käännetään asettelu, jos image-right-luokka on olemassa */
    .promo-banner.image-right {
        flex-direction: row-reverse;
    }
}