.container main{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 0.2fr 0.8fr;
    grid-template-areas: "img about"
    "img magazine";
    row-gap: 4rem;
    column-gap: 4rem;
    font-size: 2.4rem;
}


.img_bg{
    grid-area: img;
    mix-blend-mode: multiply;
    width: 100%;
}

.img_bg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.sobre{
    grid-area: about;
    font-size: 1.8rem;
    font-weight: lighter;
    color:  rgb(125, 125, 125);
    text-align: justify;
}

.editions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    grid-area: magazine;
}

.revista{
    text-align: center;
    flex: 1;
}

.revista img{
    box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.10);
    max-width: 100%;
}

@media screen and (min-width: 320px) and (max-width:480px){

    .img_bg{
        display: none;
    }

    .container main{
        display: grid;
        grid-template-columns: none;
        grid-template-rows: 0.2fr 0.8fr;
        grid-template-areas: "about"
        "magazine";
    }

    .editions{
        gap: 2rem;
        flex-direction: column;
    }

    .revista{
        max-width: 20rem;
    }

    .revista h4::before{
        content: '—';
        color: var(--brown);

    }
    .revista h4::after{
        content: '—';
        color: var(--brown);
    }

}


@media screen and (min-width: 481px) and (max-width:740px){


    .container main{
        grid-template-columns: 0.5fr 1fr;
        grid-template-rows: 0.2fr 1fr;
        font-size: 3rem;
    }
    
    .sobre{
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

}
@media screen and (min-width: 1300px){
    .container main p{
        font-size: 3rem;
        line-height: 5rem;
    }

}

@media screen and (min-width: 2560px){
    .container main p{
        font-size: 6rem;
        line-height: 6rem;
    }

}