.hero{
    background: var(--grey1);
    margin: 10px;
}

.hero .hero__wrap{
    display: grid;
    max-width: 1224px;
    height: 588px;
    margin: 0 auto;
    grid-template-columns: minmax(200px, 410px) 80px 1fr;
    grid-template-rows: 80px 400px 108px;
}

.hero .hero__wrap .hero__image{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    grid-area: 2/2/4/4;
    margin-right: -50px;
}

.hero .hero__wrap .hero__image img{
    width: 100%;
    max-height: 588px;
    border-radius: 0 0 18px 0 ;
}

.hero .hero__wrap .hero__content{
    position: relative;
    grid-template-rows: fit-content(100%) auto;
    grid-template-columns: 1fr;
    z-index: 1;
    display: grid;
    height: 485px;
    border-radius: 0 0 18px;
    background: var(--white);
    box-shadow: 0 4px 20px rgb(0 0 0 /5%);
    grid-area: 1/1/3/3;
    transition: .3s ease all;
}
.hero .hero__wrap .hero__content:hover{
    box-shadow: 4px 4px 20px rgb(0 0 0 /5%);
    transform: scale(1.01);
}

.hero .hero__wrap .hero__content .hero__data{
    display: flex;
    grid-area: 1/1/2/2;
    justify-content: space-between;
    padding: 35px 35px 20px;
}

.hero .hero__wrap .hero__content .hero__data .hero__info .info_cat{
    transition: .3s ease all;
    font-family: 'Telefonica-sans-demibold';
    font-size: .6875rem;
    line-height: .75rem;
    display: block;
    margin-bottom: 3px;
    letter-spacing: .05rem;
    text-transform: uppercase;
    color: var(--grey9);
}

.hero .hero__wrap .hero__content .hero__data .hero__info .info_date{
    font-family: 'Telefonica-sans-regular';
    font-size: .8125rem;
    line-height: 1.125rem;
    letter-spacing: .01rem;
    color: var(--grey9);
}

.hero .hero__wrap .hero__content .hero__text{
    color: var(--grey9);
    font-size: 1.062rem;
    line-height: 1.875rem;
    position: relative;
    padding: 0 40px 15px 35px;
    grid-area: 2/1/3/3;
}

.hero .hero__wrap .hero__content .hero__text .hero__title{
    font-family: 'Telefonica-sans-regular';
    font-size: 2.375rem;    
    color: var(--grey9);
    transition: all .3s;
    margin-bottom: 10px;
    display: -webkit-inline-box;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 3.25rem;
    cursor: pointer;
}

.hero .hero__wrap .hero__content .hero__text .hero__title:hover{
    color: var(--blue);
}

.hero .hero__wrap .hero__content .hero__text .hero__title .cta--white-arrow{
    top: auto;
    width: 80px;
    height: 80px;    
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 0 0 18px;
    background-size: 80px;        
    background-color: var(--blue);
    background-size: 40%;
    background: center / cover no-repeat;
}

.hero .hero__wrap .hero__content:hover .hero__text .hero__title .cta--white-arrow{
    animation: cta-h--60 .3s linear;
}

@keyframes cta-h--60{
    0%{background-position:center center}
    to{background-position:60px center}
}

.hero .hero__wrap .hero__content .hero__text .hero__subtext{
    font-family: 'Telefonica-sans-regular';
    display: -webkit-inline-box;
    visibility: visible;
    overflow: hidden;
    height: auto;
    padding: 0 65px 0 0;
    text-decoration: none;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.news__buttons{
    text-align: right;
}