@layer components {
  .inscricao {
    text-align: center;
  }

  .inscricao .card {
    position: relative;
    padding-inline: clamp(180px, 20vw, 240px);
  }

  .inscricao .inscricao-ilustracao {
    position: absolute;
    top: -64px;
    width: min(240px, 24vw);
    margin: 0;
    pointer-events: none;
  }

  .inscricao .inscricao-ilustracao--left {
    left: 0;
    width: min(288px, 28.8vw);
    transform: translateX(-14%);
  }

  .inscricao .inscricao-ilustracao--right {
    right: 0;
    transform: translateX(8%);
  }

  .inscricao .inscricao-ilustracao img {
    width: 100%;
    height: auto;
    display: block;
  }

  .inscricao .card h3,
  .inscricao .card p,
  .inscricao .card .cta-button {
    max-width: 44rem;
    margin-inline: auto;
  }

  .inscricao .cta-button {
    display: inline-block;
    padding: 16px 36px;
    border: none;
    border-radius: 50px;
    background: var(--wood-light);
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
  }

  .inscricao .cta-button--disabled {
    opacity: 0.75;
    cursor: not-allowed;
  }

  .regulamento-inline-link,
  .regulamento-inline-link:visited,
  .regulamento-inline-link:hover,
  .regulamento-inline-link:active {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    text-decoration: underline;
    text-decoration-color: #fff;
    text-underline-offset: 2px;
    font-weight: 700;
  }

  .regulamento-inline-link--disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }
}