.o-block {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

  @media all and (min-width: 1025px) {.o-block {
    grid-template-columns: repeat(2, 1fr)
}
  }

  @media all and (min-width: 1201px) {.o-block {
    gap: 5rem
}
  }

  @media all and (min-width: 1025px) {

  .o-block--no-media {
      grid-template-columns: auto
  }
    }

  .o-block__start {
    display: grid;
    gap: 1.5rem;
  }

  @media all and (min-width: 1201px) {

  .o-block__start {
      gap: 3.125rem
  }
    }

  @media all and (min-width: 1025px) {

  .o-block--reflected .o-block__start {
        grid-row: 1;
        grid-column: 1
    }
      }

  @media all and (min-width: 1025px) {

  .o-block--no-media .o-block__start {
        gap: 1.875rem
    }
      }

  @media all and (min-width: 1025px) {

  .o-block--reflected .o-block__end {
        grid-row: 1;
        grid-column: 2
    }
      }

  .o-block__text {
    display: grid;
    gap: 1.5rem;
  }

  @media all and (min-width: 1201px) {

  .o-block__text {
      gap: 3.125rem
  }
    }

  @media all and (min-width: 1025px) {

  .o-block--no-media .o-block__text {
        gap: 1.875rem
    }
      }

  .o-block__text h1,
    .o-block__text h2,
    .o-block__text h3,
    .o-block__text h4,
    .o-block__text h5,
    .o-block__text h6,
    .o-block__text p,
    .o-block__text ul {
      margin: 0;
    }

  .o-block__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  .o-block__media {
    overflow: hidden;
    filter: drop-shadow(1.875rem 4.375rem 6.25rem rgb(117 115 255 / 0.2));
    border-radius: 2.5rem;
  }

  .o-block__hero-dark {
    background-position: center;
    /* background-image: url('/images/bg-hero.jpg'); */
    background-size: cover;
  }

  .o-block--charity-banner {
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    border-radius: 1rem;
    background-color: var(--color-primary, #3182ce);
  }

  .o-block--charity-banner .o-block__text {
      max-width: 50rem;
      margin: 0 auto;
    }

  .o-block--charity-banner .o-block__text h1,
      .o-block--charity-banner .o-block__text h2,
      .o-block--charity-banner .o-block__text h3,
      .o-block--charity-banner .o-block__text h4,
      .o-block--charity-banner .o-block__text h5,
      .o-block--charity-banner .o-block__text h6 {
        margin-bottom: 1rem;
        font-weight: 700;
      }

  .o-block--charity-banner .o-block__text p {
        margin-bottom: 1.5rem;
        font-size: 1.125rem;
      }

  .o-block--charity-banner .o-block__text .highlight {
        text-decoration: underline;
      }

  .o-block--charity-banner .o-block__cta-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 40.625rem;
      margin: 0 auto;
    }

  @media all and (min-width: 769px) {

  .o-block--charity-banner .o-block__cta-group {
        flex-direction: row;
        justify-content: center
    }
      }

  .o-block--charity-banner .o-block__cta-group .search-form {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 1rem;
      }

  @media all and (min-width: 769px) {

  .o-block--charity-banner .o-block__cta-group .search-form {
          flex-direction: row;
          margin-bottom: 0
      }
        }

  .o-block--charity-banner .o-block__cta-group .search-form .search-input-container {
          position: relative;
          width: 100%;
          margin-bottom: 0.75rem;
        }

  @media all and (min-width: 769px) {

  .o-block--charity-banner .o-block__cta-group .search-form .search-input-container {
            margin-right: 0.75rem;
            margin-bottom: 0
        }
          }

  .o-block--charity-banner .o-block__cta-group .search-form .search-input-container input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            color: #333;
            border: none;
            border-radius: 0.75rem;
            background-color: white;
            font-size: 1rem;
          }

  .o-block--charity-banner .o-block__cta-group .search-form .search-input-container input::placeholder {
              color: #9ca3af;
            }

  .o-block--charity-banner .o-block__cta-group .search-form .search-input-container .search-icon {
            position: absolute;
            top: 50%;
            left: 0.75rem;
            transform: translateY(-50%);
            pointer-events: none;
          }

  .o-block--charity-banner .o-block__cta-group .search-form .search-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.75rem 1.5rem;
          cursor: pointer;
          transition: background-color 0.2s;
          color: white;
          border: none;
          border-radius: 0.75rem;
          background-color: var(--color-accent, #2b6cb0);
          font-weight: 600;
        }

  .o-block--charity-banner .o-block__cta-group .search-form .search-button:hover {
            background-color: var(--color-accent-dark, #2c5282);
          }

  .o-block--charity-banner .o-block__cta-group .category-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        margin-top: 1rem;
      }

  .o-block--charity-banner .o-block__cta-group .category-tags .tag-label {
          margin-right: 0.5rem;
          font-size: 0.875rem;
        }

  .o-block--charity-banner .o-block__cta-group .category-tags .tag {
          display: inline-block;
          padding: 0.25rem 0.75rem;
          cursor: pointer;
          transition: background-color 0.2s;
          border: 0.0625rem solid rgb(255 255 255 / 0.2);
          border-radius: 624.9375rem;
          background-color: rgb(255 255 255 / 0.1);
          font-size: 0.875rem;
        }

  .o-block--charity-banner .o-block__cta-group .category-tags .tag:hover {
            background-color: rgb(255 255 255 / 0.2);
          }