.event-subscription-form {
  width: 100%;
  display: block;
  height: max-content;
  overflow: hidden;

  & > div:last-of-type picture img {
    display: block;
  }

  form {
    height: max-content;

    .subscription-submit-container {
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .subscription-submit {
      font-family: var(--body-font-family);
      background-color: #3b63fb;
      color: #fff;
      border-radius: 16px;
      border: 2px solid #1473e6;
      font-size: 15px;
      font-style: normal;
      font-weight: 700;
      line-height: 16px;
      padding: 5px 14px;
      text-decoration: none;
      cursor: pointer;
    }

    .subscription-submit:disabled {
      background-color: #f4f4f4;
      border-color: #f4f4f4;
      color: #bcbcbc;
      cursor: not-allowed;
    }

    .subscription-submit:hover:not(:disabled) {
      background-color: #274dea;
    }
  }

  .subscription-form {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 72px 36px 36px;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    width: 100%;
  
    .subscription-title {
      padding-bottom: .5rem;
      font-size: 2.625rem;
      color: rgb(44 44 44);
      box-sizing: border-box;
      font-family: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-weight: 400;
      line-height: 1.25;
      margin : 0;
    }

    .subscription-description {
      margin: 0;
      padding-bottom: 2rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: rgb(44 44 44);
    }


    #subscription-form {
      display: table;
      border-collapse: separate;
      border-spacing: 0 24px;
      margin: -20px 0;
    }

    .subscription-consent-notice {
      padding: 0;
      color : #505050;
      font-size: .75rem;
      line-height: .875rem;
      font-weight: 300;
      margin: 1rem 0 -.5rem;
    }

    .subscription-consent-notice a {
      color: #2c2c2c;
      font-weight: 400;
      text-decoration: underline;
    }
    
    .subscription-label {
      box-sizing: border-box;
      padding: 4px 0 5px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.3;
      vertical-align: top;
    }

    .subscription-input {
      padding: 0 6px;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 2px solid #cfcfcf;
      margin-bottom: 15px;
      height: 32px;
    }

    .error {
      border-color: red;
    }

    .subscription-textbox-container {
      display: flex;
      flex-direction: column;
    }

    .error-message {
      display: block;
      visibility: hidden;
      transition: .28s;
      overflow: hidden;
      color: red;
      font-size: .75rem;
      margin-top: -.75rem;
      font-weight: 400;
      line-height: 1.3;
    }

    .show {
      visibility: visible;
    } 
  }

  .thankyou-view {
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: rotateY(180deg);
    backface-visibility: hidden;

    div:first-child {
      height: 50%;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    div:last-of-type {
      height: 50%;
      gap: 1.25rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 1.25rem 1.875rem;
    }

    h2 {
      font-size: 2.625rem;
      line-height: 1;
      text-align: left;
      color: rgb(44 44 44);
      margin: 0;
      font-weight: 400;
    }
  
    p {
      color: rgb(44 44 44);
      flex-grow: 1;
      margin: 0;
      font-size: 1rem;
      box-sizing: border-box;
      font-weight: 400;
      line-height: 1.5;
    }
  }

  .flipper {
    position: relative;
    width: 100%;
    perspective: 1000px;
    height: auto;
  }

  .front-view {
    height: max-content;
    transition: transform 0.6s ease-in-out;
    z-index: 2;
    transform: rotateY(0deg);
  }
  
  .back-view {
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 1px);
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
    transform: rotateY(180deg);
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .flipper.flipped .front-view {
    pointer-events: none;
    transform: rotateY(-180deg);
  }
  
  .flipper.flipped .back-view {
    transform: rotateY(0deg);
    z-index: 3;
  }

  .hidden {
    display: none;
  }
}

@media (min-width: 600px) {
  .event-subscription-form {
    max-width: 580px;
  }
}