.mec-series-cover,
.cd-collapse-placeholder {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #092f2b;
  color: #f4f0e8;
}

.mec-series-cover::before,
.mec-series-cover::after,
.cd-collapse-placeholder::before,
.cd-collapse-placeholder::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.mec-series-cover {
  width: min(100%, 1440px);
  height: clamp(300px, 34vw, 500px);
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 68px) max(24px, calc((100% - 1224px) / 2));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(244, 240, 232, .24);
}

.mec-series-cover span,
.cd-collapse-placeholder span {
  font: 800 .78rem/1.1 Barlow, sans-serif;
  letter-spacing: .14em;
}

.mec-series-cover strong {
  font: 900 clamp(4.5rem, 10vw, 9rem)/.78 Barlow, sans-serif;
  letter-spacing: -.08em;
  position: relative;
  z-index: 2;
}

.mec-series-cover::before {
  width: clamp(180px, 28vw, 400px);
  aspect-ratio: 1;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  border: clamp(16px, 2.2vw, 32px) solid #fedb00;
  border-radius: 50%;
  opacity: .95;
}

.mec-series-cover::after {
  width: 42%;
  height: 1px;
  left: 29%;
  top: 50%;
  background: rgba(244, 240, 232, .45);
  transform: rotate(-18deg);
  transform-origin: center;
}

.mec-series-cover--2::before,
.cd-collapse-placeholder--2::before { border-radius: 0; transform: translateY(-50%) rotate(45deg); }
.mec-series-cover--3::before,
.cd-collapse-placeholder--3::before { border-radius: 48% 52% 68% 32%; border-color: #41a886; }
.mec-series-cover--4::before,
.cd-collapse-placeholder--4::before { border-width: 1px; box-shadow: 0 0 0 28px #fedb00, 0 0 0 56px #f4f0e8; }
.mec-series-cover--5::before,
.cd-collapse-placeholder--5::before { border-radius: 0 100% 0 100%; border-color: #ee6b4d; }
.mec-series-cover--6::before,
.cd-collapse-placeholder--6::before { border-radius: 50% 0 50% 0; }
.mec-series-cover--7::before,
.cd-collapse-placeholder--7::before { border-color: #f4f0e8; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.mec-series-cover--8::before,
.cd-collapse-placeholder--8::before { border-radius: 0; border-color: #41a886; transform: translateY(-50%) rotate(12deg); }
.mec-series-cover--9::before,
.cd-collapse-placeholder--9::before { border-radius: 50% 50% 0 0; border-color: #ee6b4d; }
.mec-series-cover--10::before,
.cd-collapse-placeholder--10::before { border: 1px solid #f4f0e8; box-shadow: inset 0 0 0 26px #092f2b, inset 0 0 0 28px #fedb00; }

.cd-collapse-placeholder {
  min-height: 220px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cd-collapse-placeholder strong {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  font: 900 clamp(2.7rem, 4.2vw, 4.8rem)/.82 Barlow, sans-serif;
  letter-spacing: -.08em;
}

.cd-collapse-placeholder::before {
  width: min(42%, 160px);
  aspect-ratio: 1;
  right: 18%;
  top: 48%;
  transform: translateY(-50%);
  border: 14px solid #fedb00;
  border-radius: 50%;
}

.cd-collapse-placeholder::after {
  width: 58%;
  height: 1px;
  left: 10%;
  top: 56%;
  background: rgba(244, 240, 232, .5);
  transform: rotate(-20deg);
}

@media (min-width: 861px) {
  .cd-latest-list > a .cd-collapse-placeholder::before {
    right: 11%;
    width: min(34%, 138px);
  }
  .cd-latest-list > a .cd-collapse-placeholder strong {
    font-size: clamp(2.25rem, 3.2vw, 3.5rem);
  }
}

@media (max-width: 700px) {
  .mec-series-cover {
    height: 300px;
    padding: 28px 24px;
  }
  .mec-series-cover::before {
    right: -12%;
    width: 210px;
  }
  .mec-series-cover::after { width: 55%; left: 18%; }
  .mec-series-cover strong { font-size: 4.3rem; }
  .mec-series-cover span { max-width: 10rem; }
  .cd-collapse-placeholder { min-height: 190px; }
  .cd-collapse-placeholder::before { right: 8%; width: 120px; }
}