.cav-arch-row {
  align-items: center;
  display: flex;
  gap: 4.8rem;
  justify-content: center;
  margin-inline-start: clamp(-40rem, calc((40/107.2) * (100dvi - 155.2rem)), 0rem);
  overflow-x: hidden;
  padding-block: 9.6rem;

  & > * {
    flex-shrink: 0;
    max-inline-size: 35.2rem;
  }

  & > .cav-arch-row__content {
    align-items: center;
    aspect-ratio: 384/512;
    display: flex;
    font-family: "moret", serif;
    font-size: 4rem;
    inline-size: 100%;
    justify-content: center;
    line-height: 1.125;
    padding-block-start: 4.8rem;
    padding-inline: 1.6rem;
    position: relative;
    text-align: center;

    &::before {
      background-color: #F7B8A5;
      content: "";
      inset: 0;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M192 0C85.96 0 0 85.96 0 192v320h384V192C384 85.96 298.04 0 192 0Z'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      position: absolute;
      z-index: 0;
    }

    & p {
      z-index: 1;
    }
  }
}

.cav-arch-row__background {
  position: relative;

  &::before {
    block-size: 42px;
    content: "";
    inset-inline: 0;
    inset-block-start: -2.1rem;
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center top;
    position: absolute;
    z-index: 0;
  }

  &.cav-arch-row__background--primary::before {
    background-image: url("./border-primary.png");
  }

  &.cav-arch-row__background--secondary::before {
    background-image: url("./border-secondary.png");
  }

  &.cav-arch-row__background--tertiary::before {
    background-image: url("./border-tertiary.png");
  }
}