<section class="latest-issues-section">
        <h2 class="latest-issues-title">Últimos números publicados</h2>
        
        <div class="latest-issues-container">
            <!-- Número 1 -->
            <div class="issue-item">
                <a href="/index.php/tu-revista/issue/view/123" class="issue-link">
                    <div class="issue-cover">
                        <img src="/public/journals/1/cover_issue_123_es.jpg" alt="Portada Vol. 5, Núm. 1 (2025)">
                    </div>
                    <div class="issue-info">
                        <h3 class="issue-title">Vol. 5, Núm. 1 (2025)</h3>
                        <div class="issue-date">Enero 2025</div>
                    </div>
                </a>
            </div>
            
            <!-- Número 2 -->
            <div class="issue-item">
                <a href="/index.php/tu-revista/issue/view/122" class="issue-link">
                    <div class="issue-cover">
                        <img src="/public/journals/1/cover_issue_122_es.jpg" alt="Portada Vol. 4, Núm. 4 (2024)">
                    </div>
                    <div class="issue-info">
                        <h3 class="issue-title">Vol. 4, Núm. 4 (2024)</h3>
                        <div class="issue-date">Octubre 2024</div>
                    </div>
                </a>
            </div>
            
            <!-- Número 3 -->
            <div class="issue-item">
                <a href="/index.php/tu-revista/issue/view/121" class="issue-link">
                    <div class="issue-cover">
                        <img src="/public/journals/1/cover_issue_121_es.jpg" alt="Portada Vol. 4, Núm. 3 (2024)">
                    </div>
                    <div class="issue-info">
                        <h3 class="issue-title">Vol. 4, Núm. 3 (2024)</h3>
                        <div class="issue-date">Julio 2024</div>
                    </div>
                </a>
            </div>
            
            <!-- Número 4 -->
            <div class="issue-item">
                <a href="/index.php/tu-revista/issue/view/120" class="issue-link">
                    <div class="issue-cover">
                        <img src="/public/journals/1/cover_issue_120_es.jpg" alt="Portada Vol. 4, Núm. 2 (2024)">
                    </div>
                    <div class="issue-info">
                        <h3 class="issue-title">Vol. 4, Núm. 2 (2024)</h3>
                        <div class="issue-date">Abril 2024</div>
                    </div>
                </a>
            </div>

            <!-- Número 4 -->
            <div class="issue-item">
                <a href="/index.php/tu-revista/issue/view/120" class="issue-link">
                    <div class="issue-cover">
                        <img src="/public/journals/1/cover_issue_120_es.jpg" alt="Portada Vol. 4, Núm. 2 (2024)">
                    </div>
                    <div class="issue-info">
                        <h3 class="issue-title">Vol. 4, Núm. 2 (2024)</h3>
                        <div class="issue-date">Abril 2024</div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <style>
        /* Contenedor principal */
        .latest-issues-section {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 15px;
        }

        .latest-issues-title {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }

        /* Contenedor de los números */
        .latest-issues-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        /* Cada número individual */
        .issue-item {
            flex: 1 1 calc(25% - 20px);
            max-width: calc(25% - 20px);
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .issue-item:hover {
            transform: translateY(-10px);
        }

        .issue-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        /* Contenedor de la imagen */
        .issue-cover {
            position: relative;
            height: 300px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
            background-color: #f5f5f5;
        }

        .issue-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .issue-link:hover .issue-cover img {
            transform: scale(1.05);
        }

        /* Información del número */
        .issue-info {
            text-align: center;
            padding: 5px;
        }

        .issue-title {
            font-size: 16px;
            margin-bottom: 5px;
            color: #333;
        }

        .issue-date {
            font-size: 14px;
            color: #666;
        }

        /* Estilos responsive */
        @media (max-width: 992px) {
            .issue-item {
                flex: 1 1 calc(50% - 15px);
                max-width: calc(50% - 15px);
            }
        }

        @media (max-width: 576px) {
            .issue-item {
                flex: 1 1 100%;
                max-width: 100%;
            }
            
            .issue-cover {
                height: 350px;
            }
        }
    </style>