.single_post {
position: relative;
isolation: isolate;
.post_thumb {
z-index: 0;
border-radius: var(--border-radius-m);
aspect-ratio: 6 / 5;
position: relative;
isolation: isolate;
overflow: hidden;
&::after {
content: "";
position: absolute;
inset: 0;
background-color: hsl(from var(--color-primary-pink) h s l / 0);
transition: background-color 0.4s ease;
}
}
.post_data {
position: relative;
z-index: 1;
margin-top: -19px;
display: flex;
flex-direction: column;
gap: calc(var(--gap-s) / 2);
align-items: flex-start;
.post_label {
padding: calc(var(--gap-s) / 2);
border-radius: var(--border-radius-max);
background-color: var(--color-primary-pink);
color: var(--color-white);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.7px;
}
.post_meta {
display: flex;
flex-wrap: wrap;
gap: calc(var(--gap-s) / 2);
p {
display: inline-flex;
&::before {
content: "";
display: inline-flex;
background-color: var(--color-text);
width: 1px;
height: 100%;
margin-right: calc(var(--gap-s) / 2);
}
&:first-of-type {
&::before {
display: none;
}
}
}
}
}
&:hover {
color: var(--color-text);
.post_thumb {
&::after {
background-color: hsl(from var(--color-primary-pink) h s l / 0.6);
}
}
}
}