.main-content {
  background-color: var(--custom-text-background-color, #fff);
  color: var(--custom-text-color, #09090b);
  max-width: 510px;
  overflow: hidden;
  width: 100%;

  @media only screen and (width >= 600px) {
    border-radius: 8px;
    box-shadow:
      0 20px 35px -5px rgb(0 0 0 / 15%),
      0 12px 15px -4px rgb(0 0 0 / 12%);
  }

  & article {
    /* padding: 1rem;

    @media only screen and (width >= 600px) {
      padding: 2rem;
    } */

    & > * {
      padding: 0 1rem;

      @media only screen and (width >= 600px) {
        padding: 0 2rem;
      }
    }

    & > :first-child {
      margin-top: 1rem;

      @media only screen and (width >= 600px) {
        margin-top: 2rem;
      }
    }

    & > :last-child {
      margin-bottom: 1rem;

      @media only screen and (width >= 600px) {
        margin-bottom: 2rem;
      }
    }

    & > * + * {
      margin-top: 2rem;
    }

    & h1 {
      font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
        "P052", serif;
      font-weight: 300;
      font-size: 2.25rem;
    }

    h2 {
      font-size: 1.25rem;
    }

    & dl {
      flex: 1;
    }

    & dt {
      color: var(--custom-text-color-muted);
      font-size: 0.875rem;

      & label {
        color: var(--custom-text-color);
      }
    }

    & .icon {
      color: var(--custom-text-color-muted);
      width: 24px;
    }

    & .prose > * + * {
      margin-top: 1rem;
    }

    & .io-attending-button,
    & .io-not-attending-button {
      width: 100%;
      text-align: center;
      display: block;
    }

    & a:not(.btn) {
      text-decoration: none;
      color: var(--custom-link-color, black);
      padding: 0.25rem;
      border-radius: 0.25rem;

      &:visited {
        color: var(--custom-link-color, black);
      }

      &:hover {
        color: var(--custom-link-color-hover, black);
      }
    }

    & .invitation--finished {
      @media only screen and (width >= 600px) {
        display: flex;
      }

      & dd {
        margin-bottom: 0.5rem;
      }
    }

    & .invitation--qr img {
      border: 1px solid var(--custom-border-color);
      border-radius: 4px;
      margin-bottom: 1rem;
      max-width: 150px;
    }

    & .invitation--wallet-button-wrapper {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    & .tito-digital-pass-button img {
      height: 35px;
    }

    & section form {
      padding: 0;
    }
  }
}