/* //////////////////////////////////////////////////////////////////////////

   CSS Part III — Signup, Signin & Contact page

   ////////////////////////////////////////////////////////////////////////// */
.custom-wrap {
   gap: 0;
   grid-template-columns: 6fr 3fr;
}

.custom-content {
   align-items: center;
   margin-bottom: calc(var(--grid-gap) / 1.4);
   grid-column: 1/-1;
   grid-template-rows: auto 1fr;
}

.custom-content.is-img {
   grid-column: 1;
}

.custom-container {
   max-width: 600px;
   justify-self: center;
}

/* Title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.custom-title {
   font-weight: var(--font-weight-display);
   margin: 0 0 2vw;
}

/* Form
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.custom-content input {
   border-radius: var(--radius-full);
}

.custom-content input,
.custom-content textarea {
   font-size: var(--font-size-input);
   width: 100%;
   margin-bottom: 12px;
   padding: 1.2em 1.6em;
   transition: background-color .16s ease;
   background-color: var(--color-two);
}

.custom-content input:hover,
.custom-content input:focus,
.custom-content textarea:hover,
.custom-content textarea:focus {
   background-color: var(--color-three);
}

.custom-content textarea {
   min-height: 120px;
   margin-top: max(10px, 1.5vw);
   resize: vertical;
   border-radius: var(--radius-medium);
}

.custom-content button,
.custom-success a {
   margin-top: calc(var(--mini-gap) * 2);
   padding: .8em 2em;
}

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.custom-img {
   position: relative;
   overflow: hidden;
   align-content: center;
   grid-column: 2;
}

.custom-img figcaption {
   position: absolute;
   text-align: right;
   inset: auto var(--mini-gap) var(--mini-gap);
}

/* /////// data /////// */
[data-context="custom"] {
   height: 100vh;
}

[data-appearance="blurred"] [data-context="custom"] figure {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 4vw;
   place-items: center;
}

[data-appearance="blurred"] [data-context="custom"] figure > img {
   display: block;
   max-width: 460px;
   height: auto;
   border-radius: var(--radius);
   object-fit: contain;
}

[data-appearance="blurred"] [data-context="custom"] figcaption a {
   color: inherit;
}

[data-appearance="colorful"] [data-context="custom"] figure > img {
   position: absolute;
   inset: 0;
   object-fit: cover;
}

[data-appearance="colorful"] [data-context="custom"] :is(figcaption, figcaption a) {
   color: var(--color-font-black);
}

/* RWD — Signup, Signin & Contact page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .custom-content.is-img {
      grid-column: 1/-1;
   }

   .custom-img {
      display: none;
   }

}

@media (max-width:480px) {
   .custom-content button {
      width: 100%;
   }

}