.web-stories-card {
  --card-max-height: 547px;
  --card-padding-top: 177.59%;
  --color-bg: #004596;
  --image-aspect-ratio: 0.75;
  --image-max-height: 546px;
  --description-height: 136px;
  --description-font-size: 28px;
  --description-line-height: 121%;
  --description-padding: 30px 23px 68px 17px;
}

.web-stories-card:nth-child(even) {
  --color-bg: #E65907;
}

@media (max-width: 1440px) {
  .web-stories-card {
    --card-max-height: 440px;
    --card-padding-top: 177.41%;
    --description-height: 108px;
    --description-font-size: 22px;
    --description-padding: 24px 11px 56px 14px;
  }
}
@media (max-width: 1024px) {
  .web-stories-card {
    --card-max-height: 411px;
    --card-padding-top: 177.92%;
    --description-height: 100px;
    --description-font-size: 21px;
    --description-padding: 24px 10px 52px 14px;
  }
}
@media (max-width: 835px) {
  .web-stories-card {
    --card-max-height: 436px;
    --card-padding-top: 177.23%;
    --description-height: 108px;
    --description-font-size: 22px;
    --description-padding: 24px 11px 53px 15px;
  }
}
@media (max-width: 480px) {
  .web-stories-card {
    --card-padding-top: 177.08%;
    --description-height: 64px;
    --description-font-size: 13px;
    --description-padding: 14px 6px 31px 8px;
  }
}
.web-stories-card {
  height: auto;
  display: flex;
}

.web-stories-card > a {
  flex: 1;
  max-width: 350px;
  width: 100%;
  max-height: var(--card-max-height);
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-bg);
  cursor: pointer;
  position: relative;
  padding-top: var(--card-padding-top);
}

.web-stories-card__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.web-stories-card__image-wrapper {
  width: 100%;
  flex: 1;
  position: relative;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 100"><path d="M 0 0 L 75 0 L 75 66 C 65 111 10 111 0 66 L 0 0 Z" fill="red"/></svg>') no-repeat bottom/cover;
}

.web-stories-card__image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  /* aspect-ratio: var(--image-aspect-ratio); */
  /* clip-path: polygon(101% -1%,-1% -1%,-1% 62.087%,-1% 62.087%,.654% 68.209%,2.549% 74.017%,5.581% 79.433%,9.647% 84.379%,14.645% 88.777%,20.471% 92.549%,27.022% 95.619%,34.196% 97.908%,41.89% 99.338%,50% 99.832%,50% 99.832%,58.11% 99.338%,65.804% 97.908%,72.978% 95.619%,79.529% 92.549%,85.355% 88.777%,90.353% 84.379%,94.419% 79.433%,97.451% 74.017%,101% 68.209%,101% 62.087%,101% -1%); */
}

.web-stories-card__description {
  height: var(--description-height);
  margin: var(--description-padding);
  flex-shrink: 0;
}

.web-stories-card__description-inner {
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--description-font-size);
  line-height: var(--description-line-height);
  font-weight: 500;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: white;
  word-break: break-word;
  letter-spacing: 0;
}