@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto&display=swap');

*, *::before, *::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items:center;
  background: #f3f3f3;
}

.card{
  width: 25rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 4px 4px 15px rgba(#000, 0.15);
  position : relative;
  color: #434343;
}

.card .card__container{
  padding : 2rem;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 1rem;
  position: relative;
}

.card .card__header{
  margin-bottom: 1rem;
  font-family: 'Playfair Display', serif;
}

.card .card__body{
  font-family: 'Roboto', sans-serif;
}

.card::before{
  position: absolute;
  top:2rem;
  right:-0.5rem;
  content: '';
  background: #283593;
  height: 28px;
  width: 28px;
  transform : rotate(45deg);
}

.card::after{
  position: absolute;
  content: attr(data-label);
  top: 11px;
  right: -14px;
  padding: 0.5rem;
  width: 10rem;
  background: #3949ab;
  color: white;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}