.icon-card__top {
  margin-bottom: 20px;
}


@container (width > 600px) {
  .layout--twocol-section--75-25 {
    align-items: center;

    h2 {
      margin-block: 0;
    }
  }
}

[type="submit"].button--primary:where(:not([disabled])) {
  background-color: #D3FF82;
}

/* The title/video section on the homepage. */
.layout__twocol_section--video-title {
  video {
    pointer-events: none;
  }
}

.node--type-page .text-content {
  max-width: 75ch;
}

/* Faq view. */
.view-faq h3:first-child {
  margin-top: 0;
}

/* Blog card. */
.view-blog.view-display-id-block_2 .card {
  --box-shadow-distance: -210px;
  --box-shadow-color: var(--neutral-900);
  --gap: var(--spacing-m);

  margin-top: calc(-1 * var(--spacing-component-internal));
  box-shadow:
    -30vw var(--box-shadow-distance) 0 var(--box-shadow-color),
    0 var(--box-shadow-distance) 0 var(--box-shadow-color),
    30vw var(--box-shadow-distance) 0 var(--box-shadow-color);

  @container (width <= 600px) {
    .card__bottom {
      padding-inline: 20px;

      .card__body {
        font-size: var(--body-l-size);
      }
    }
  }

  @media (width > 3300px) {
    box-shadow: none; /* Breaks beyond this. Maybe move to border-image. */
  }

  @container (width > 1200px) {
    .card__title {
      font-size: var(--h3-size);
      font-weight: var(--h3-weight);
      line-height: var(--h3-line-height);
      letter-spacing: var(--h3-letter-spacing);
      font-family: var(--h3-font-family);
    }
  }
}

.region-highlighted {
  position: relative;
  z-index: 1; /* Appear above box shadow on blog. */
}

/* About page contact section. */
.layout--about-contact {
  [type="text"],
  [type="email"],
  select,
  textarea {
    width: 100%;
  }
}

.fieldset {
  margin: var(--spacing-s) 0;

  &:not(:is(.fieldset, .details) &) {
    --fieldset-border-color: transparent;
  }
}

[type="radio"],
[type="checkbox"] {
  float: inline-start;
  display: block;
  margin-bottom: 1px;
  /* Prevent text from wrapping. */
  margin-right: var(--spacing-xs);
}

/* Order page */
.order-info-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--sp4);
  margin-bottom: var(--spacing-component-internal);

  @container (width > 700px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  > * {
    grid-column: revert;
  }
}

.customer-information,
.order-information,
.layout-license-form,
.layout-checkout-form {
  .field {
    margin-block: var(--spacing-xs);

    &:first-child {
      margin-top: 0;
    }
  }

  .field__label {
    font-weight: 600;

    &::after {
      content: ":";
    }
  }
}

/* Address. @todo put somewhere in Dripyard base. */
.address {
  display: inline-block;
  padding: var(--sp1) var(--sp2);
  font-size: var(--body-m-size);
  line-height: 1.2;
  border-inline-start: solid 1px var(--theme-border-color-alt);
}

.dripyard-user-magic-link-login-form {
  max-width: fit-content;

  [type="text"],
  [type="email"] {
    width: 100%;
  }
}

details :is(ul, ol) {
  margin-block: var(--spacing-xs);
}


tr:hover {
  background: transparent;
}


/* Site template demo */
.webform-submission-meridian-charter-live-demo-reque-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  max-width: 700px;

  > * {
    margin-block: 0;
  }

  .form-item {
    margin-block: 0;
  }

  [type="email"] {
    width: 100%;
  }

  [type="checkbox"] {
    margin-bottom: 10px;
  }

  .description {
    max-width: none;
  }
}