.relathos.full{
    margin-bottom: 100px !important;
}

.relathos h1 {
    border: none;
    text-align: center;
    width: 100%;
    margin-top: 40px;
    color: var(--c-black);
    font-size: 2.5rem;
    font-weight: 700;
}

.relathos .content-relathos{
    margin-top: 2.4rem;
    clear: both;
}

.relathos .field--name-field-published-in{
    color: var(--c-gray-700);
}

.relathos .created{
    margin-bottom: 1rem;
    color: var(--c-gray-700);
}

.relathos .field--name-field-authors{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--c-gray-700);
}

.relathos .field--name-field-authors::before{
    content: url('data:image/svg+xml,<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 8C9.20937 8 11 6.20937 11 4C11 1.79063 9.20937 0 7 0C4.79063 0 3 1.79063 3 4C3 6.20937 4.79063 8 7 8ZM9.8 9H9.27812C8.58437 9.31875 7.8125 9.5 7 9.5C6.1875 9.5 5.41875 9.31875 4.72188 9H4.2C1.88125 9 0 10.8812 0 13.2V14.5C0 15.3281 0.671875 16 1.5 16H12.5C13.3281 16 14 15.3281 14 14.5V13.2C14 10.8812 12.1188 9 9.8 9Z" fill="%23DDDDDD"/></svg>');
    display: block;
    height: 1.35rem;
}

.relathos:not(.teaser) .field--name-field-media-image{
    float: left;
    margin-right: 2rem;
    margin-bottom: 1.5rem;
    max-width: 180px;
}
@media(min-width:516px){
    .relathos:not(.teaser) .field--name-field-media-image{
        max-width: 420px;
    }
}

.relathos .field--name-field-media-image img{
    width: 100%;
    height: auto;
}

.relathos.full .content-relathos .field--name-body {
    margin-bottom: 3rem !important;
}

/* Teaser */

.relathos.teaser .content-relathos{
    display: flex;
    flex-direction: column;
    background-color: var(--c-white);
    margin-top: 0;
}
@media(min-width:48rem){
    .relathos.teaser .content-relathos{
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

.relathos.teaser .field--name-field-media-image{
    float: none;
    width: 100%;
    height: auto;
    display: block;
    margin-right: 0;
}
@media(min-width:48rem){
    .relathos.teaser .field--name-field-media-image{
        height: 100%;
    }
    .relathos.teaser .field--name-field-media-image img{
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        object-position: center;
    }
}



.relathos.teaser .content-relathos .text{
    padding: 1.75rem;
}

.relathos.teaser .content-relathos h2{
    text-align: left;
    font-size: 1.5rem;
    margin-block: 0;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.relathos.teaser .content-relathos h2 a{
    text-decoration: none;
}

.relathos.teaser .content-relathos h2 a:hover{
    text-decoration: underline;
}

.relathos.teaser .content-relathos .text-info{
    margin-bottom: 0.5rem;
    color: var(--c-gray-700);
}

.relathos.teaser .content-relathos p{
    margin-bottom: 0;
    padding-bottom: 0;
}

body .main-container > .row > div .region-content .relathos.teaser .field--name-body {
    margin-bottom: 0;
}

.relathos .text > a.readmore{
    color: var(--c-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    text-decoration: none !important;
}
.relathos .text > a.readmore:hover{
    text-decoration: underline !important;
}

.relathos .text > a.readmore:after{
    display: block;
    content: '';
    background: url('../../images/icons/readmore_red.svg');
    margin-left: 0.5rem;
    width: 18px;
    height: 11px;
    background-size: 18px 11px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
}

/* Audio teaser */
.relathos.audio-relathos .content-relathos{
    display: flex;
    flex-direction: column;
    background-color: var(--c-white);
    padding: 1.75rem;
    margin-top: 0;
}
@media(min-width:678px){
    .relathos.audio-relathos .content-relathos{
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: 1.5rem;
    }
}

.relathos.audio-relathos .content-relathos h2{
    text-align: left;
    font-size: 1.5rem;
    margin-block: 0;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.relathos.audio-relathos .content-relathos .field--name-field-media-audio-file{
    margin-top: 1.35rem;
}

.relathos.audio-relathos img{
    margin-bottom: 1rem;
}
@media(min-width:678px){
    .relathos.audio-relathos img{
        margin-bottom: 0;
    }  
}

.relathos.audio-relathos audio{
    width: -webkit-fill-available;
}