@media screen and (max-width: 1275px) { .post-min-container { height: calc(var(--profile-content-width-min)/2); width: calc((var(--profile-content-width-min) + 6rem - 4rem)/3); } .post-min { height: calc(var(--profile-content-width-min)/2); } .post-min img { max-height: calc(var(--profile-content-width-min)/4); } } @media screen and (min-width: 1276px) { .post-min-container { height: calc(var(--profile-content-width-max)/2); width: calc((var(--profile-content-width-max) + 6rem - 4rem)/3); } .post-min { height: calc(var(--profile-content-width-max)/2); } .post-min img { max-height: calc(var(--profile-content-width-max)/4); } } .post-min-container { display: grid; grid-template-areas: "post-min-overlay-back" "post-min-overlay-front" "post-min"; margin-left: 1rem; margin-right: 1rem; } .post-min { cursor: pointer; display: flex; flex-direction: column; grid-area: overlay; z-index: var(--z-index-front); } .post-min img { width: auto; width: 100%; object-fit: cover; border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-bottom-left-radius: 0.6rem; border-bottom-right-radius: 0.6rem; margin-bottom: 1rem; } .post-min h1 { font-weight: 800; font-size: 1.1rem; margin-left: 1rem; margin-right: 1rem; /* Overflow */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 3; line-clamp: 3; } .post-min-overlay-front { grid-area: overlay; background-image: var(--background-light); box-shadow: var(--shadow); border-radius: 1rem; } .post-min-overlay-back { grid-area: overlay; border-radius: 1rem; } .post-min-pill { height: 2rem; width: auto; margin: 1rem; margin-top: auto !important; } .post-min-pill svg { border-radius: 100% !important; width: 1.2rem !important; height: 1.2rem !important; padding: calc((2rem - 1.2rem)/2); color: var(--color-background); background: linear-gradient(180deg, rgb(52, 42, 58), rgb(38, 28, 44)); margin-right: 1rem; } .post-min-pill span { font-size: 0.8rem; }