/*
 * MODULE: Grid - 4 squares grid block
 * Purpose: Styles for grid-4sq block component
 * WARNING: Do not override global layout here.
 */

.informe-block-grid-4sq {
    margin-bottom: 40px;
}

.informe-block-grid-4sq__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .informe-block-grid-4sq__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .informe-block-grid-4sq__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Estilos para post-title en bloques grid */
.informe-block-grid-4sq .post-title {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.informe-block-grid-4sq .post-title a {
    font-family: MajritTx, serif;
    font-size: var(--fs-title-sm);     /* 1rem - 16px */
    font-weight: var(--fw-title-base); /* 600 - Estándar El País */
    line-height: var(--lh-title-sm);   /* 1.19 */
    letter-spacing: var(--ls-title-sm);/* -.005625rem */
    color: #000;
    text-decoration: none;
    display: block;
    margin-top: 6px;
}

.informe-block-grid-4sq .post-title a:hover {
    color: var(--color-title-hover);  /* #444 */
    text-decoration: underline;
}