.related-articles-container {
    max-width: 1400px; /* Max. šířka pro 4 články */
    margin: 0 auto; /* Centrování */
    padding: 0 15px; /* Odsazení na okrajích */
}

/* Styl pro nadpis */
.related-articles-container h2 {
    font-size: 1.8em; /* Velikost nadpisu */
    margin-bottom: 20px; /* Odsazení pod nadpisem */
    color: #333; /* Barva textu */
    text-align: left; /* Zarovnání doleva */
}

/* Styl pro kontejner článků */
.related-articles-wrapper {
    position: relative; /* Pro potenciální absolutní prvky */
}

/* Styl pro grid kontejner */
.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responzivní grid, min. 250px pro 4 články */
    gap: 15px; /* Mezera mezi články */
    align-items: stretch; /* Zajistí, že všechny články mají stejnou výšku */
}

/* Styl pro jednotlivé články */
.related-articles-item {
    background: #fff; /* Bílé pozadí */
    border-radius: 8px; /* Zaoblené rohy */
    overflow: hidden; /* Skrytí přesahujícího obsahu */
    text-decoration: none; /* Odstranění podtržení odkazů */
    color: #333; /* Barva textu */
    transition: transform 0.2s, box-shadow 0.2s; /* Animace při hover */
    display: flex; /* Flex pro konzistentní výšku */
    flex-direction: column; /* Vertikální uspořádání */
}

/* Hover efekt */
.related-articles-item:hover {
    transform: translateY(-5px); /* Lehké zvednutí */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Výraznější stín */
}

/* Styl pro odkaz */
.related-articles-link {
    display: flex;
    flex-direction: column; /* Vertikální uspořádání */
    height: 100%; /* Vyplnění celé výšky článku */
    text-decoration: none; /* Odstranění podtržení */
}

/* Styl pro rámeček obrázku */
.related-articles-img-wrap {
    width: 100%; /* Plná šířka */
    align-items: center; /* Vertikální centrování */
    justify-content: center; /* Horizontální centrování */
    flex-grow: 0; /* Rámeček se přizpůsobí obsahu */
    border-radius: 8px 8px 0 0; /* Zaoblení pouze nahoře */
}

/* Styl pro obrázek */
.related-articles-img-wrap img {
    max-width: 100%; /* Max. šířka obrázku */
    width: auto; /* Automatická šířka pro zachování poměru */
    height: auto; /* Automatická výška pro zachování poměru */
    object-fit: contain; /* Zobrazení celého obrázku bez ořezání */
    display: block; /* Odstranění mezer pod obrázkem */
}

/* Styl pro textovou část */
.related-articles-text {
    padding: 15px; /* Vnitřní odsazení */
    flex-grow: 1; /* Vyplnění prostoru */
    text-align: left; /* Zarovnání textu doleva */
}

/* Styl pro nadpis */
.related-articles-title {
    font-size: 1.2em; /* Velikost nadpisu */
    line-height: 1.4; /* Řádkování */
    margin: 0; /* Odstranění výchozího marginu */
    color: #333; /* Barva textu */
}

/* Responzivní úpravy */
@media (max-width: 1200px) {
    .related-articles-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 3 články na menších desktopech */
    }

    .related-articles-title {
        font-size: 1.1em; /* Menší nadpis */
    }

    .related-articles-img-wrap {
        min-height: 180px; /* Menší výška na menších desktopech */
    }
}

@media (max-width: 768px) {
    .related-articles-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 články na tabletech */
    }

    .related-articles-img-wrap {
        min-height: 160px; /* Menší výška na tabletech */
    }

    .related-articles-img-wrap img {
        max-height: 160px; /* Omezení max. výšky na tabletu */
    }
}

@media (max-width: 480px) {
    .related-articles-grid {
        grid-template-columns: 1fr; /* 1 článek na mobilu */
    }

    .related-articles-item {
        padding: 10px; /* Menší padding na mobilu */
    }

    .related-articles-img-wrap {
        min-height: 140px; /* Menší výška na mobilu */
    }

    .related-articles-img-wrap img {
        max-height: 140px; /* Omezení max. výšky na mobilu */
    }
}