/* -- The root styles must go in the element of the structure with the name "Card". --*/

.card-blog{
  /* Update these variables with the background color and border radius variables you are using. */
  --radius-value: var(--radius-m);
  --color-background: var(--white);

  /* Inverted border styles in the button container */
  .card-blog__btn-wrapper{

    &:before{
      content: '';
      width: calc(2 * var(--radius-value));
      height: calc(2 * var(--radius-value));
      background-color: transparent;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      transform: translateY(100%);
      border-radius: 50%;
      box-shadow: calc(-1 * var(--radius-value)) calc(-1 * var(--radius-value)) var(--color-background);
    }

    &:after{
      content: '';
      width: calc(2 * var(--radius-value));
      height: calc(2 * var(--radius-value));
      background-color: transparent;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      transform: translateX(100%);
      border-radius: 50%;
      box-shadow: calc(-1 * var(--radius-value)) calc(-1 * var(--radius-value)) var(--color-background);
    }
  }
}