.rssdisplay-container {
display: flex;
flex-wrap: wrap;
gap: 10px; font-family: sans-serif;
}
.rssdisplay-container.verticaal {
flex-direction: column;
}
.rssdisplay-container.horizontaal .rssdisplay-item { flex: 1 1 calc((100% - (var(--rssdisplay-columns) - 1) * 20px) / var(--rssdisplay-columns)); margin-left:auto;
margin-right:auto;
min-width: 200px;
box-sizing: border-box;
}
.rssdisplay-item {
border: 1px solid #eee;
border-radius: 0px 0px 0px 0px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 20px;
}
.rssdisplay-image img {
padding: 5px 5px 0px 5px; margin-left:auto!important;
margin-right:auto!important; display: block;
margin-bottom: 0px;
border-radius: 0px 0px 8px 8px;
}
img:hover { border-radius: 8px!important;
padding:0;
-ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);
}
.rssdisplay-image img[style*="width"][style*="height"] {
object-fit: cover;
}
.rssdisplay-title {
margin-top: 10px;
margin-left:auto!important;
margin-right:auto!important;
justify-content: center;
margin-bottom: 0px;
line-height: 1.0;
font-weight: 700;
}
.rssdisplay-title a {
text-decoration: none;
color: #333;
}
.rssdisplay-title a:hover {
color: #0073aa;
}
.rssdisplay-meta {
padding:0px 10px 0px 10px;
font-size: 0.5em;
color: #666;
margin-bottom: 10px!important;
}
.rssdisplay-excerpt {
padding: 0px 10px 0px 10px;
margin-bottom: 5px;
color: #444;
font-weight: 400;
} .rssdisplay-share-buttons {
margin-top: auto;
padding-top: 5px;
border-top: 1px solid #eee;
display: flex;
gap: 5px;
justify-content: flex-end;
margin-bottom: 5px;
}
.rssdisplay-share-buttons a,
.rssdisplay-share-buttons span {
display: inline-flex;
align-items: center;
margin-left:auto;
margin-right:auto;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
color: #555;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.rssdisplay-share-buttons a:hover {
background-color: #e0e0e0;
color: #000;
}
.rssdisplay-share-buttons i {
font-size: 1.2em;
}
.rssdisplay-share-buttons a[title*="Facebook"] { background-color: #3b5998; color: #fff; }
.rssdisplay-share-buttons a[title*="Facebook"]:hover { background-color: #2d4373; } .rssdisplay-share-buttons span[title*="Instagram"] { background-color: #C13584; color: #fff; }
.rssdisplay-share-buttons a[title*="WhatsApp"] { background-color: #25D366; color: #fff; }
.rssdisplay-share-buttons a[title*="WhatsApp"]:hover { background-color: #1DA851; }
.rssdisplay-share-buttons a[title*="E-mail"] { background-color: #777; color: #fff; }
.rssdisplay-share-buttons a[title*="E-mail"]:hover { background-color: #555; } @media (max-width: 1025px) {
.rssdisplay-container.horizontaal .rssdisplay-item { max-width: 50%;
}
}
@media (max-width: 769px) {
.rssdisplay-container.horizontaal .rssdisplay-item {
flex: 1 1 100% !important;
max-width: 45%;
}
}
@media (max-width: 361px) {
.rssdisplay-container.horizontaal .rssdisplay-item {
flex: 1 1 100% !important;
max-width: 90%;
}
}