@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
*{
    margin:0;
    padding:0;
    font-family: "Poppins",sans-serif;
}
.body{
    box-sizing:border-box;
    font-family:"Poppins", sans-serif;
    font-size:20px;
    width:100%;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content:center;
    padding:0 1.5rem;
}
:root{
    --gradient-color: linear-gradient(right bottom, rgba(255,119,48,0,8),rgba(255,185,0,0,8) )
}
.html{
    font-size:10px;
}
a{
    text-decoration: none;
    color:inherit;
    padding-right:5px;
    
}
.card{
    display:flex;
    flex-direction: column;
    box-shadow:  2px .8rem 1rem lightgrey;
    background-color: white;
    margin-top:40px;
    margin-left: 10%;
    margin-right:10%;
    margin-bottom:20px;
    border-radius: 40px;
}

.image-data{
    height: 25rem;
    position: relative;
    z-index:1;
    overflow:hidden;
   
}

.background-image{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    background: url(2020_Leitermann_26.jpg) center no-repeat;
    background-size:cover;
    z-index: -1;
    transition: transform 5s;

}
.Bild1{
    background: url(oststernFrank2.jpg) center no-repeat;

}
.Bild2{
    background: url(L4.png) center no-repeat;

}
.Bild3{
    background: url(Luise2.jpg) center no-repeat;

}
.Bild4{
    background: url(EdiWohnpark2.jpg) center no-repeat;

}
.Bild5{
    background: url(CafeEck2.jpg) center no-repeat;

}
.card:hover .background-image{
    transform: scale(1.5);
}

.publication-details{
    width:100%;
    height:100%;
    background-color:rgb(153, 27, 27, 0.658);
    font-size:20px;
    font-weight:bold;
    color:white;
    position:absolute;
    top:0;
    left:0;
    padding: 1rem;
}

.publication-details i{
    margin-right: 1rem;
}

.author{
    display: inline-block;
    margin-bottom: .5rem;
    transition: all .5s .3s;
}
.author:hover{
    color:black;
    
}
.date{
    display:block;
    transition:all .5s;
}
.date:hover{
    color:black;
}
.post-data{
    background-color: white;
    padding: 2rem 3rem;
    position:relative;
}
.title{
    font-size:20px;
    line-height: 25px;
}
.subtitle{
    font-size:1.2rem;
    font-weight:500;
    text-transform: uppercase;
    margin: 1rem 0 1.5rem;

}
.description{
    position:relative;
}

.description::first-letter{
    margin-left:1rem;
}

.description::before{
    content:'';
    position: absolute;
    top:0;
    left:0;
    width:0.5rem;
    height:1.5rem;
    background:rgb(153, 27, 27, 0.800);
    border-radius: 2rem;
}

.cta{
    text-align:right;
    font-weight: bold;
    margin-top:1rem;

}

.cta a{
    background:rgb(153, 27, 27, 0.800);
    -webkit-background-clip: text;
    color:transparent;
    position:relative;
}
.cta a::before{
    content:'';
    position:absolute;
    left:0;
    bottom:-.5rem;
    width:100%;
    height:3px;
    background:rgb(153, 27, 27, 0.800);
    transform:scaleX(0);
    transition: transform .5s;
    transform-origin: left;
}

.cta a:hover::before{
    transform:scaleX(1);
}
.card .left{
    transform:scaleX(-1)
    
}
@media(max-width:2560px){
    .card{
        margin-left:30%;
    }
}
@media(max-width:2000px){
    .card{
        margin-left:15%;
    }
}

@media screen and (min-width:600px){
    .card{
        flex-direction:row ;
        max-width: 75rem;

    }
    .image-data{
        flex-basis: 40%;
        height: unset;
    }

    .publication-details{
        transform: translateX(-100%);
        transition:transform .5s;
    }
    .card:hover .publication-details{
        transform:translateX(0);
    }
    .author{
        transform:translateY(-3rem);
        opacity:0;
        transition-delay: .3s;

    }
    .date{
        transform:translateY(3rem);
        opacity:0;
        transition: all .5s .3s;
    }
    .card:hover .author, 
    .card:hover .date{
        transform: translateY(0);
        opacity:1;
    }
    .post-data{
        flex-basis: 60%;
    }

}
@media(max-width:500px){
    .publication-details{
        font-size:18px;

    }
}
@media(max-width:500px){
    .card{
        margin-left: 5%;
        margin-right: 5%;
    }
    .publication-details{
        font-size:16px;
    }
    .post-data{
        font-size:12px;
        line-height: 16px;
    }
    .subtitle{
        line-height:20px;
    }
    .description::before{
        height:1rem;
    }

    .subtitle{
        font-size:15px;
    }
    .publication-details{
        transform: translateX(-100%);
        transition:transform .5s;
    }
    .card:hover .publication-details{
        transform:translateX(0);
    }
    .author{
        transform:translateY(-3rem);
        opacity:0;
        transition-delay: .3s;

    }
    .date{
        transform:translateY(3rem);
        opacity:0;
        transition: all .5s .3s;
    }
    .card:hover .author, 
    .card:hover .date{
        transform: translateY(0);
        opacity:1;
    }
}