.editorial {
    display:grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto;
    grid-template-areas: 
    "foto data"
    "foto titol"
    "foto texte"
    "foto boto";
    row-gap: 0.3125rem;
    padding: 0.625rem 0;
    border-bottom: 3px solid red;
}

.editorial .foto {
    grid-area:foto;
    width: 80%;
    height: auto;
    margin:auto;
    object-fit: cover;
    border-radius: 10px;
}

.editorial .data {
    grid-area:data;
    font-size:0.9rem;
    color: var(--color-vermell);
    margin-left:0.3125rem;
}

.editorial .titol{
    grid-area:titol;
    font-weight: bold;
    font-size:1.1rem;
    margin-left:0.3125rem;
}
        
.editorial .text {
    grid-area:texte;
    margin-left:0.3125rem;
}

.editorial .boto {
    grid-area:boto;
}

.editorial_item {
    width: 100%;
    padding:0.625rem;

    .nom_diari {
        margin-left: 0;
        font-size: 3rem;
        font-weight: bold;
    }

    .data_editorial{
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--color-vermell);
        text-align:center;
        margin-bottom: 1.875rem;
    }

    .titol_editorial{
        font-size: 1.5rem;
        text-align:center;
    }

    .foto_esquerra {
        width: 20rem;
        height: auto;
        float: left;
        margin-right: 0.625rem; 
    }

    .foto_dreta {
        width: 20rem;
        height: auto;
        float: right;
        margin-left: 0.625rem;
    }
}

@media (max-width: 768px) {

    .foto_esquerra,
    .foto_dreta {
        float: none;
        width: 100%;
        margin: 1.5rem 0;
    }

}