.recensie_layout{
    position: relative;
    flex-shrink: 0;
    padding: max(2.5rem, calc(4.25 * var(--su)))
            max(1.5rem, calc(3.75 * var(--su)))
            max(2.5rem, calc(4.25 * var(--su)))
            max(1.5rem, calc(3.75 * var(--su)));
    background-color: var(--bg);
    color: var(--wit);

    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.recensie_layout::before{
    content: '';
    background-color: var(--accent);
    inset: 0;
    z-index: -1;
    position: absolute;
    clip-path: polygon(
      /* top shape */
      0% 0%,
      100% 0%,
      100% 4.998%,
      9.054% 6.059%,
      0% 27.55%,
      /* slide down left edge to bottom-left triangle */
      0% 85.452%,
      64.381% 100%,
      /* along bottom edge to bottom-right triangle */
      84.792% 100%,
      100% 97.057%,
      100% 100%,
      84.792% 100%,
      /* back along bottom, closes up the left edge to 0% 0% */
      0% 100%
    );
}

.recensie_layout .rating{
    display: flex;
    flex-direction: row;
    gap: max(.25rem, calc(.25 * var(--su)));
    margin-bottom: max(1.25rem, calc(2 * var(--su)));
}

.recensie_layout .star{
    display: block;
    width: max(1.25rem, calc(2 * var(--su)));
    aspect-ratio: 1;
    background-color: var(--stars);
    --mask-url: url("data:image/svg+xml,%3Csvg width='27' height='26' viewBox='0 0 27 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6654 0.381992C12.8309 -0.127387 13.5515 -0.127385 13.717 0.381993L16.452 8.79954C16.5261 9.02734 16.7383 9.18157 16.9779 9.18157H25.8286C26.3642 9.18157 26.5869 9.86694 26.1536 10.1818L18.9932 15.3841C18.7994 15.5249 18.7183 15.7744 18.7923 16.0022L21.5274 24.4198C21.6929 24.9291 21.1099 25.3527 20.6766 25.0379L13.5162 19.8356C13.3224 19.6948 13.06 19.6948 12.8662 19.8356L5.70582 25.0379C5.27251 25.3527 4.68951 24.9291 4.85501 24.4198L7.59004 16.0022C7.66406 15.7744 7.58297 15.5249 7.38919 15.3841L0.2288 10.1817C-0.204503 9.86694 0.0181865 9.18157 0.553779 9.18157H9.40451C9.64404 9.18157 9.85632 9.02734 9.93034 8.79954L12.6654 0.381992Z' fill='%236952EF'/%3E%3C/svg%3E%0A");
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
}

.recensie_layout .content{
    font-size: var(--desktop-body-md);
    margin-bottom: max(2.5rem, calc(2.5 * var(--su)));
}

.recensie_layout .info{
    margin-top: auto;
}

.recensie_layout .source,
.recensie_layout .name{
    display: block;
    line-height: 1.2;
    width: fit-content;
    margin-left: auto;
    font-size: var(--desktop-body-md);
}

.recensie_layout .source{
    font-weight: 700;
}

.recensie_layout .name{
    font-weight: 300;
    opacity: .4;
}

.recensie_layout:nth-of-type(3n + 1){
    --accent: var(--botergeel);
    --bg: var(--lichtpaars);
    --stars: var(--knalpaars);
}

.recensie_layout:nth-of-type(3n + 2){
    --accent: var(--bruin);
    --bg: var(--lichtpaars);
    --stars: var(--knalpaars);
}

.recensie_layout:nth-of-type(3n + 3){
    --accent: var(--knalpaars);
    --bg: var(--bruin);
    --stars: var(--wit);
}