.diensten-block .loader {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
border: 8px solid #f3f3f3;
border-top: 8px solid var(--secondary-color);
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
z-index: 999;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.diensten-block .diensten-block__posts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 80px;
}
.diensten-block .diensten-block__post {
background-color: var(--secondary-color);
padding: 20px;
border-radius: 10px;
text-align: left;
}
.diensten-block .diensten-block__post .content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: baseline;
height: 110px;
}
.diensten-block .diensten-block__post-image {
border-radius: 10px;
overflow: hidden;
position: relative;
}
.diensten-block .diensten-block__post-image img {
width: 100%;
height: 183px;
object-fit: cover;
transform: scale(1);
transition: transform 0.4s ease;
display: block;
aspect-ratio: 1.6667;
}
.diensten-block .diensten-block__post:hover .diensten-block__post-image img {
transform: scale(1.05);
}
.diensten-block .diensten-block__post-title h3 {
font-weight: 600;
font-size: 17px;
line-height: 26px;
letter-spacing: 0%;
color: var(--white-color);
margin: 0;
margin-top: 15px;
font-family: var(--font-main);
}
.diensten-block .diensten-block__post-content {
font-size: 16px;
margin-top: 10px;
}
.diensten-block .diensten-block__post-link {
display: flex;
align-items: center;
font-weight: 400;
font-size: 17px;
line-height: 32px;
color: var(--white-color);
font-family: var(--font-main);
position: relative;
padding-right: 30px;
}
.diensten-block .diensten-block__post-link::after {
content: "";
position: absolute;
right: 0px;
width: 19px;
height: 19px;
background-image: url(https://rinxs.nl/wp-content/uploads/2025/07/faq.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 19px;
top: 7px;
transition: transform 0.3s ease;
border-radius: 50%;
flex-shrink: 0;
}
.diensten-block .diensten-block__post-link:hover::after {
transform: translateX(4px);
transition: transform 0.3s ease;
}
.diensten-block .diensten-block__title{
font-weight: 700;
font-size: 60px;
line-height: 120%;
color: var(--secondary-color);
margin: 0;
font-family: var(--font-main);
text-align: center;
}
.diensten-block .diensten-block__content p{
font-weight: 400;
font-size: 17px;
line-height: 32px;
text-align: center;
color: var(--secondary-color);
font-family: var(--font-main);
max-width: 801px;
margin: 30px auto;
}
.diensten-block .diensten-block__filter{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.diensten-block .diensten-block__filter button{
padding: 13px 30px;
border-radius: 99px;
border: 1px solid #0A1F31;
font-weight: 500;
font-size: 17px;
line-height: 32px;
letter-spacing: 0px;
background: transparent;
font-family: var(--font-main);
cursor: pointer;
color: #000000;
}
.diensten-block .diensten-block__filter button:focus{
outline: none;
}
.diensten-block .diensten-block__filter button:hover {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
transition: .2s ease-in-out;
}
.diensten-block .diensten-block__filter button.active {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);]
transition: .2s ease-in-out;
}
.diensten-block__post {
display: block;
transition: transform 0.3s ease;
}
.diensten-block__badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
color: var(--secondary-color);
padding: 8px 12px;
border-radius: 100px;
font-weight: 400;
font-size: 12px;
line-height: 19px;
letter-spacing: 0px;
}
@media (max-width: 1250px){
.diensten-block .diensten-block__posts{
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px){
.diensten-block .diensten-block__posts{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 750px){
.diensten-block .diensten-block__filter {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
flex-wrap: wrap; } .diensten-block .diensten-block__title{
font-size: 40px;
line-height: 100%;
}
}
@media (max-width: 640px){
.diensten-block .diensten-block__posts{
grid-template-columns: repeat(1, 1fr);
margin-top: 40px;
}
.diensten-block .diensten-block__post-image img{
height: 270px;
}
.diensten-block .diensten-block__filter button{
padding: 10px 20px;
font-size: 15px;
}
}