.contact-archive {
width: 80%;
margin: 0 auto;
justify-content: start;
}
.cat-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 15px;
}
.contact_card {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 3px 3px 5px silver;
transition: .2s;
width: 350px;
margin-bottom: 15px;
}
.contact-profilbild {
width: 310px;
height: 310px;
object-fit: cover;
object-position: top;
}
.contact_card:hover {
box-shadow: 10px 10px 10px silver;
}
.not_hovered {
box-shadow: 0 0 35px #ff6e73;
}
.contact-icon {
font-size: 30px;
}
.contactinfo-text {
margin-left: 20px;
}
.contact-kontaktinformationen {
margin-top: 20px;
display: grid;
grid-template-columns: 30px auto;
grid-template-rows: 50% 50%;
}
.contact-kontaktinformationen a {
text-decoration: none;
color: black;
transition: .25s;
}
.contact-kontaktinformationen a:hover {
color: #F23038;
}
.contact-div {
height: 30px;
}
@media only screen and (max-device-width: 700px) {
.contact-archive {
width: 90%;
}
.cat-row h1 {
font-size: 90px;
}
.cat-cards {
display: block;
}
.contact_card {
width: 100%;
margin-bottom: 45px;
}
.contact-profilbild {
width: 100%;
height: 1000px;
}
.contact-card-title {
font-size: 60px;
margin-bottom: 0;
margin-top: 10px;
}
.contact-info-text {
font-size: 30px;
}
.contact-kontaktinformationen {
grid-template-columns: 50px auto;
}
.contact-div {
height: 50px;
}
.contact-icon {
font-size: 50px;
}
.contactinfo-text {
font-size: 30px;
}
}