@import "_functions";
@import "_mixins";
@import "_variables";


.block.block-lb-donate {
  background: linear-gradient(118.46deg, var(--wsPrimaryColor, #006B6B) 56.84%, var(--wsSecondaryColor, #01A490) 96.61%);

  .image {
    display: none;

    @include media-breakpoint-up(md) {
      display: block;
      position: absolute;
      width: 50%;
      height: 100%;
      background-size: cover;
      background-position: right;
      background-repeat: no-repeat;
      left: 0;
    }
  }

  .chevron {
    z-index: -1;

    svg {
      height: 70%;
      width: auto;
      transform: translateX(50px);
      position: absolute;
      right: 0;
      bottom: -50px;

      @include media-breakpoint-up(md) {
        height: 115%;
        transform: none;
        top: 0;
      }
    }
  }

  .image + .chevron {
    @include media-breakpoint-up(md) {
      display: none;
    }
  }

  .lb_donate__container {
    @include media-breakpoint-down(md) {
      width: 100%;
    }
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 30px 15px;
    z-index: 3;
  }

  .section-header {
    margin-bottom: 2.75rem;

    h2 {
      font-size: 38px;
      line-height: 40px;
      margin-bottom: 16px;
      @include media-breakpoint-up(md) {
        font-size: 48px;
        line-height: 54px;
      }
    }

    p {
      font-size: 1.125rem;
      line-height: 1.625rem;
    }
  }

  .lb_donate {
    .btn {
      border-radius: 10px;
      font-family: var(--ylb-font-family-cachet, Verdana), sans-serif;
      padding-bottom: 7px;
      line-height: normal;
    }
  }

  .lb_donate__amounts {
    @include media-breakpoint-up(md) {
      gap: 1.875rem;
      margin-bottom: 1.875rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    list-style: none;
    gap: 1.25rem;
    margin-bottom: 1.25rem;

    .btn {
      color: var(--wsPartnerColor, #4F4F4F);
      background-color: var(--ylb-color-white, white);
      border: 2px solid var(--wsPartnerColor, #4F4F4F);

      &:hover {
        color: var(--ylb-color-white, white);
        background-color: var(--wsPartnerColor, #4F4F4F);
      }
    }
  }

  .section-cta {
    a.btn {
      color: var(--ylb-color-white, white);
      background-color: var(--wsPartnerColor, #4F4F4F);
      border: 2px solid var(--wsPartnerColor, #4F4F4F);

      &:hover {
        color: var(--wsPartnerColor, #4F4F4F);
        background-color: var(--ylb-color-white, white);
      }
    }
  }
}
