.callout-1 {
    padding: 20px 0 80px;
}
.callout-1 .img-blog {
    max-width: 585px;
    border-radius: 15px;
    overflow: hidden;
}
.callout-1 .titulo-blog {
    font-size: 24px;
    line-height: 1.3;
    color: var(--color3);
}
.callout-1 .titulo-blog:hover {
    text-decoration: underline;
}
.callout-1 .fecha {
    padding: 20px 0 10px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color3);
}
.callout-1 .btn-blog {
    font-size: 15px;
    color: var(--color2);
}
.callout-1 .btn-blog:hover {
    text-decoration: underline;
}
.callout-1 .video-youtube {
    max-width: 565px;
    width: 100%;
    height: 300px;
    margin: 0 auto;
}
.callout-2 {
    padding: 20px 0 80px;
}
.callout-2 .retor {
    font-size: 14px;
    color: var(--color2);
}
.callout-2 .retor:hover {
    text-decoration: underline;
}
.callout-2 h1 {
    font-size: 28px;
}
.callout-2 .fecha {
    padding: 20px 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color3);
}
.callout-2 .breve {
    font-size: 20px;
}
.callout-2 .detalle > * {
    padding-bottom: 20px;
}
.callout-2 .detalle h4 {
    font-size: 20px;
    padding-bottom: 5px;
}

@media screen and (max-width: 768px){
    .callout-1 .video-youtube {
        max-width: 380px;
        height: 223px;
    }
}