/* Created by Content Blocks */
.medien-card {
	position: relative;
	display: flex;
 	word-wrap: break-word;
    width:100%;
     /*  aspect-ratio:3/2; */
}

.medien-label {
    display:inline-block;
    block-size: fit-content;
    width: fit-content;
    font-family: var(--ff-prim);
    font-size:18px;
    color:rgb(104, 104, 104);
    padding:6px 12px;
    border:1px solid rgb(104, 104, 104);
    margin-bottom:35px; 
    line-height:100%; 
}


.medien-suptitle {
    font-family: var(--ff-sec);
    font-size:21px;
    color:var(--clr-bg-green-2);
    margin-bottom:10px;
}

.medien-title {
    font-family: var(--ff-sec);
    font-size:32px;
    color:var(--clr-quar);
}

.medien-info {
    position:relative;
    display:inline-block;
    font-family: var(--ff-prim);
    font-size:19px;
    color:var(--clr-quar);
    width:220px;
   margin-top: auto;
    padding-top:8px;
    border-top:1.6px solid var(--clr-bg-green-2);
}


.medien-info:after {
    position:absolute;
    right:0;
    top:10px;
    content:'';
    display: inline-block;
	width: 22px;
	height: 22px;
	mask-image: url('/fileadmin/user_upload/Dokumente/08_Logos_Icons/icon_external-link.svg');
	mask-size: cover;
	mask-repeat: no-repeat;
	background-color:var(--clr-quar);
	transition: all .2s ease;
}


.medien-card a,
.medien-card a div,
.medien-card a h3 {
    text-decoration:none !important;
}

.medien-card a {
    display:flex;
    flex-direction:column;
    width:100%; 
    min-height:400px; 
    padding:40px 40px 40px 40px;
    background-color:#fff;
    transition: all .3s ease;
}

.medien-card a:hover {
    background-color:rgba(255,255,255,0.8);
}

/*
.medien-card a:hover .medien-suptitle {
    color:#fff;
}
*/






/* Media Queries */


@media screen and (max-width: 991.5px) { 
 
 
    .medien-title {
        font-size: 30px;
    }

  
}


@media screen and (max-width: 767.5px) { 

    .medien-card a {
        min-height: auto;
        padding: 40px 40px 40px 40px;
    }

    .medien-info {
        margin-top: 30px;
    }

    .medien-title {
        font-size: 28px;
    }
    
}





@media screen and (max-width: 575.5px) { 
  
  
    .medien-card a {
        min-height: auto;
        padding: 25px;
    }

    .medien-title {
        font-size: 26px;
    }

}



@media screen and (max-width: 480px) { 
    .medien-card a {
        padding: 18px;
    }

      .medien-title {
        font-size: 24px;
    }

}