.anniversary-card {
  padding:            1rem;
  display:            grid;
  grid-template-rows: 1fr 3fr;
  align-items:        center;

  height:             40rem;    /* (Maybe) Delete this in real environment. */
  width:              69rem;    /* (Maybe) Delete this in real environment. */

  color:              #FCFDFC;
  background-color:   transparent;
  border-radius:      2rem 0;

  font-family:     'din-pro', sans-serif;
}


/*----- Card Header */

.anniversary-card__header {
  position:              relative;

  display:               grid;
  grid-template-columns: 1fr 3fr;

  height:                12rem;
  width:                 100%;  /* (Maybe) Delete this in real environment. */

  background-color:      #007EC3;
  border-radius:         2rem 0 0 0;
  line-height:           1.2;
}


/* Anniversary Year: */

.anniversary-card-header__year {
  line-height: 1.1;
  text-align:  center;
  font-size:   11rem;
  font-weight: bold;
}


/* Vertical Line: */

.anniversary-card-header__text::before {
  position:         absolute;
  left:             25%;
  top:              2rem;
  bottom:           2rem;

  width:            5px;

  content:          '';
  background-color: #FCFDFC;
}


/* Anniversary Text: */

.anniversary-card-header__text {
  margin:        auto 0;
  padding-left:  3.2rem;
  text-align:    left;
  font-size:     3.6rem;
}



/*----- Discount Badge */

.anniversary-card__discount-badge {
  position:         absolute;

  display:          flex;
  justify-content:  center;
  align-items:      center;

  height:           20rem;
  width:            20rem;

  background-color: #CA1240;;
  border-radius:    50%;
  font-size:        4.8rem;
  text-align:       center;
  line-height:      1;
  transform:        rotate(352deg) translate(220%, 24%);
}

.anniversary-card-discount-badge__rectangle {
  position:         absolute;

  height:           1.8rem;
  width:            12rem;

  background-color: #007EC3;
  transform:        rotate(25deg) translate(3%, -510%);
}


.anniversary-card-discount-badge__lose-edge {
  position:         absolute;

  height:           2.2rem;
  width:            11rem;

  background-color: #FCFDFC;
  border-radius:    0 0 230% 230%;
  transform:        rotate(25deg) translate(0%, -327%)
}

.anniversary-card-discount-badge-lose-edge__concave-1 {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;

  height:           2.2rem;
  width:            3.2rem;

  background-color: #CA1240;
  border-radius:    50% 170% 0 0%;
  transform:        rotate(45deg) translate(173%, -203%);
}

.anniversary-card-discount-badge-lose-edge__convex-1-container {
  position:  absolute;
  overflow:  hidden;
  padding:   20px 0;
  width:     6rem;
  height:    2px;
  transform: rotate(32deg) translate(-35%, -249%);
}

.anniversary-card-discount-badge-lose-edge__convex-1-inner {
  position:         relative;
  background-color: #CA1240;
  height:           120px;
}

.anniversary-card-discount-badge-lose-edge__convex-1-inner:before,
.anniversary-card-discount-badge-lose-edge__convex-1-inner:after {
  box-shadow:    0 0 0 80px #CA1240;
  border-radius: 30% 40%;
  position:      absolute;
  height:        150px;
  content:       '';
  right:         -20%;
  left:          -20%;
  top:           100%;
}

.anniversary-card-discount-badge-lose-edge__convex-1-inner:after {
  bottom: 100%;
  top:    auto;
}

.anniversary-card-discount-badge-lose-edge__concave-2 {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;

  height:           2.2rem;
  width:            3.2rem;

  background-color: #CA1240;
  border-radius:    170% 50% 0 0;
  transform:        rotate(355deg) translate(468%, 275%);
}

.anniversary-card-discount-badge-lose-edge__convex-2-container {
  position:  absolute;
  overflow:  hidden;
  padding:   20px 0;
  width:     6rem;
  height:    2px;
  transform: rotate(25deg) translate(15%, -259%);
}

.anniversary-card-discount-badge-lose-edge__convex-2-inner {
  position: relative;
  background: #CA1240;
  height: 120px;
}

.anniversary-card-discount-badge-lose-edge__convex-2-inner:before,
.anniversary-card-discount-badge-lose-edge__convex-2-inner:after {
  box-shadow:    0 0 0 80px #CA1240;
  border-radius: 40% 0;
  position:      absolute;
  height:        150px;
  content:       '';
  right:         -20%;
  left:          -20%;
  top:           100%;
}

.anniversary-card-discount-badge-lose-edge__convex-2-inner:after {
  bottom: 100%;
  top:    auto;
}

.anniversary-card-discount-badge__text {
  z-index: 9999;
}


/*----- Card Body */

.anniversary-card__body {
  height:           28rem;
  padding:          1.6rem 2rem;
  line-height:      1.4;
  background-color: #003E90;
  border-radius:    0 0 2rem 0;
  font-size:        1.9rem;
}


/*----- Card Footer */

.anniversary-card__footer {
  margin-top:  3rem;
  font-size:   1.5rem;
  line-height: 1.3;
}

.anniversary-card-footer__discount-code {
  background-color: #CA1240;
  font-weight:      bold;
}