/* do not delete */

.donation-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.donation-grid__item {
  width: 100%;
  margin-bottom: 20px;
}

.donation-grid__item form {
  height: 100%;
}

.l-grid__gap {
  width: 1rem;
  display: block;
}

@media screen and (min-width: 600px) {
  .donation-grid {
    flex-direction: row;
  }

  .donation-grid__item {
    width: calc(50% - 1rem - 1px);
  }

  .l-grid__gap:nth-child(4n) {
    display: none;
  }
}

@media screen and (min-width: 980px) {
  .donation-grid__item {
    width: calc(25% - 1.5rem - 1px);
  }

  .l-grid__gap:nth-child(4n) {
    display: block;
  }
}

.m-donation-button {
  display: block;
  padding: 0.6rem 1.2rem 0.8rem 0.8rem;
  border: 2px solid #1b2a3a;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1),
    background-color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1),
    border 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  height: 100%;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.m-donation-button:hover,
.m-donation-button.hover {
  background-color: white;
}

.m-donation-button__description {
  color: #1b2a3a;
}

.m-donation-button__price {
  font-family: MessinaSerifWeb, Arial, sans-serif;
  font-weight: 700;
  color: #1b2a3a;
  text-align: right;
  font-size: 3.2rem;
  line-height: 1;
  display: inline-block;
  width: 100%;
  margin-top: 1rem;
}

.m-donation-button__price sub {
  font-size: 2.2rem;
  line-height: 1;
  margin-right: 0.7rem;
  bottom: 0;
}

.m-donation-button--custom {
  position: relative;
  overflow: hidden;
}
.m-donation-button--custom .m-donation-button__input-wrapper {
  display: block;
}

.m-donation-button__input-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 30;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  transition: width 0.3s cubic-bezier(0.39, 0.575, 0.565, 1),
    opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1),
    visibility 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.m-donation-button:hover.m-donation-button--custom
  .m-donation-button__input-wrapper,
  .m-donation-button.hover.m-donation-button--custom
  .m-donation-button__input-wrapper {
  visibility: visible;
  opacity: 1;
}

.m-donation-button__input-wrapper input {
  background-color: transparent;
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform: translateX(1rem);
  padding: 1rem 0.9rem;
  box-shadow: none;
}

.m-donation-button:hover.m-donation-button--custom
  .m-donation-button__input-wrapper
  input,
  .m-donation-button.hover.m-donation-button--custom
  .m-donation-button__input-wrapper
  input {
  transform: translateX(0);
}

.m-donation-button:hover.m-donation-button--custom .m-donation-button__price,
.m-donation-button.hover.m-donation-button--custom .m-donation-button__price {
  visibility: hidden;
  opacity: 0;
}

.m-donation-button:hover.m-donation-button--custom
  .m-donation-button__input-wrapper
  input, 
  .m-donation-button.hover.m-donation-button--custom
  .m-donation-button__input-wrapper
  input {
  transform: translateX(0);
}

.m-donation-button__input-wrapper .donation-arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
}

.m-donation-button__input-wrapper .donation-arrow svg {
  height: 1.4rem;
  width: 2.5rem;
  transform: rotate(-90deg) translateY(50%);
}

.noborder {
  border: none;
}