* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: calc(14px + 3 * ((100vw - 400px) / 400));
  line-height: 1.25;
}
@media screen and (max-width: 400px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}
body {
  background: #f5f5f5;
}
.example {
  position: relative;
  width: 90%;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 2rem 0;
}
.example::after {
  content: '';
  display: table;
  clear: both;
}
.column {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
}
.column:first-of-type {
  left: 0;
  box-shadow: 1rem 0 0.5rem -0.5rem rgba(0, 0, 0, 0.1);
}
.column:last-of-type {
  right: 0;
  box-shadow: -1rem 0 0.5rem -0.5rem rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 600px) {
  .column {
    display: none;
  }
}
.card {
  position: relative;
  width: 40%;
  padding: 3rem 1.5rem;
  box-shadow: 0 0.3rem 0.5rem -0.1rem rgba(0, 0, 0, 0.1);
  text-align: right;
  background: #fff;
  --triangle-width: 30%;
}
.card::before {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  bottom: 50%;
  width: var(--triangle-width);
  height: 50%;
}
.card::after {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  bottom: 0;
  width: var(--triangle-width);
  height: 50%;
}
.card:nth-of-type(2n - 1) {
  -webkit-transform: translateX(150%);
          transform: translateX(150%);
  text-align: left;
}
.card:nth-of-type(2n - 1)::before,
.card:nth-of-type(2n - 1)::after {
  left: auto;
  right: 100%;
}
.card:nth-of-type(2n - 1) > .title::after {
  right: calc(100% + var(--triangle-width) / 3);
  left: auto;
  -webkit-transform: translateX(0.5rem) translateY(-50%);
          transform: translateX(0.5rem) translateY(-50%);
}
.card:nth-of-type(1)::before {
  background: -webkit-gradient(linear, right bottom, left top, from(#9BC53D), color-stop(50%, #9BC53D), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to top left, #9BC53D 0%, #9BC53D 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(1)::after {
  background: -webkit-gradient(linear, right top, left bottom, from(#71912D), color-stop(50%, #71912D), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to bottom left, #71912D 0%, #71912D 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(1) > .title::after {
  content: 'A';
  text-shadow: 0 0 1px #2B3811;
}
.card:nth-of-type(2)::before {
  background: -webkit-gradient(linear, left bottom, right top, from(#FFE330), color-stop(50%, #FFE330), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to top right, #FFE330 0%, #FFE330 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(2)::after {
  background: -webkit-gradient(linear, left top, right bottom, from(#E8C22C), color-stop(50%, #E8C22C), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to bottom right, #E8C22C 0%, #E8C22C 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(2) > .title::after {
  content: 'B';
  text-shadow: 0 0 1px #705900;
}
.card:nth-of-type(3)::before {
  background: -webkit-gradient(linear, right bottom, left top, from(#5BC0EB), color-stop(50%, #5BC0EB), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to top left, #5BC0EB 0%, #5BC0EB 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(3)::after {
  background: -webkit-gradient(linear, right top, left bottom, from(#4796B7), color-stop(50%, #4796B7), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to bottom left, #4796B7 0%, #4796B7 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(3) > .title::after {
  content: 'C';
  text-shadow: 0 0 1px #1C3C49;
}
.card:nth-of-type(4)::before {
  background: -webkit-gradient(linear, left bottom, right top, from(#FA7921), color-stop(50%, #FA7921), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to top right, #FA7921 0%, #FA7921 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(4)::after {
  background: -webkit-gradient(linear, left top, right bottom, from(#C65F19), color-stop(50%, #C65F19), color-stop(51%, transparent), to(transparent));
  background: linear-gradient(to bottom right, #C65F19 0%, #C65F19 50%, transparent 51%, transparent 100%);
}
.card:nth-of-type(4) > .title::after {
  content: 'D';
  text-shadow: 0 0 1px #68310D;
}
.card + .card {
  margin-top: -4rem;
}
.card > .title {
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.card > .title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + var(--triangle-width) / 3);
  font-size: 3rem;
  color: #fff;
  z-index: 2;
  -webkit-transform: translateX(-0.5rem) translateY(-50%);
          transform: translateX(-0.5rem) translateY(-50%);
}
@media screen and (max-width: 600px) {
  .card {
    width: 70%;
  }
  .card:nth-of-type(2n-1) {
    -webkit-transform: translateX(40%);
            transform: translateX(40%);
  }
  .card + .card {
    margin-top: 2rem;
  }
}