.list {
  display: grid;
  grid-template-areas: "image header header" "image content buttons";
  grid-template-rows: auto 1fr;
  grid-template-columns: 236px 1fr 176px;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
}
@media (max-width: 900px) {
  .list {
    grid-template-areas: "image header" "content content" "buttons buttons";
    grid-template-columns: 124px 1fr;
    -webkit-column-gap: 16px;
       -moz-column-gap: 16px;
            column-gap: 16px;
  }
}
.list:not(:last-child) {
  margin-bottom: 64px;
}
.list__image {
  width: 236px;
  height: 236px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 900px) {
  .list__image {
    width: 124px;
    height: 124px;
  }
}
.list__image--wrapper {
  grid-area: image;
}
.list__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-area: header;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
@media (max-width: 900px) {
  .list__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: none;
  }
}
.list__header--text {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: 24px;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
@media (min-width: 901px) {
  .list__header--text {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}
@media (max-width: 900px) {
  .list__header--text {
    font-size: 20px;
  }
}
.list__header--price {
  margin-left: auto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #f97930;
  word-break: keep-all;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .list__header--price {
    margin-left: 0;
    font-size: 20px;
  }
}
.list__header--price-amount {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
@media (max-width: 900px) {
  .list__header--price-amount {
    font-size: 14px;
  }
}
.list__header--price-period {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
@media (max-width: 900px) {
  .list__header--price-period {
    font-size: 16px;
  }
}
.list__content {
  grid-area: content;
  padding-top: 16px;
}
@media (max-width: 900px) {
  .list__content {
    padding-top: 0;
    margin: 24px auto;
    width: 100%;
  }
}
.list__content--info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .list__content--info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 12px;
  }
}
.list__content--statusWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.list__content--status.recruiting, .list__content--status.ongoing {
  padding: 2px 16px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  border-radius: 160px;
}
.list__content--status.recruiting {
  background-color: #ececec;
}
.list__content--status.ongoing {
  color: white;
  background-color: #0064cf;
}
.list__content--recruiting {
  padding: 2px 16px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  background-color: #fff2ad;
  border: 1px solid #ffe145;
  border-radius: 160px;
}
.list__content--numberOfPeople {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 900px) {
  .list__content--numberOfPeople {
    margin-left: 0;
  }
}
.list__content--text {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 900px) {
  .list__content--text {
    font-size: 14px;
  }
}
.list__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  grid-area: buttons;
  gap: 16px;
  margin-top: auto;
}
@media (max-width: 900px) {
  .list__buttons {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.list__detailButton, .list__reserveButton {
  width: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.list__detailButton {
  padding: 12px 64px;
  color: #0064cf;
  padding: 12px 52px 12px 44px;
  color: #0064cf;
}
.list__detailButton--wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: white;
  border-radius: 5px;
}
.list__detailButton--wrapper .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}
.list__detailButton--wrapper .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: -webkit-gradient(linear, right top, left top, from(#00c6fb), to(#005bea));
  background: linear-gradient(270deg, #00c6fb 0%, #005bea 100%);
  border-radius: 5px;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.list__detailButton--wrapper:hover {
  cursor: pointer;
  opacity: 1;
}
.list__detailButton--wrapper:hover .bg::before {
  padding: 2px;
}
.list__detailButton::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 14px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-image: url('data:image/svg+xml,<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="13.5" y="0.973633" width="13" height="13" rx="6.5" transform="rotate(90 13.5 0.973633)" stroke="%230064CF"/><path d="M7.85789 5.44947C7.8149 5.40942 7.78042 5.36112 7.75651 5.30745C7.7326 5.25379 7.71974 5.19586 7.71871 5.13711C7.71767 5.07837 7.72848 5.02002 7.75048 4.96554C7.77248 4.91107 7.80524 4.86158 7.84678 4.82004C7.88832 4.77849 7.93781 4.74574 7.99229 4.72374C8.04676 4.70173 8.10511 4.69093 8.16386 4.69196C8.2226 4.693 8.28053 4.70586 8.3342 4.72977C8.38787 4.75368 8.43617 4.78816 8.47622 4.83114L10.8096 7.16447C10.8915 7.24651 10.9375 7.3577 10.9375 7.47364C10.9375 7.58958 10.8915 7.70078 10.8096 7.78281L8.47622 10.1161C8.43617 10.1591 8.38787 10.1936 8.3342 10.2175C8.28053 10.2414 8.2226 10.2543 8.16386 10.2553C8.10511 10.2564 8.04676 10.2456 7.99229 10.2235C7.93781 10.2015 7.88832 10.1688 7.84678 10.1272C7.80524 10.0857 7.77248 10.0362 7.75048 9.98174C7.72848 9.92726 7.71767 9.86891 7.71871 9.81017C7.71974 9.75143 7.7326 9.69349 7.75651 9.63983C7.78042 9.58616 7.8149 9.53786 7.85788 9.49781L9.44455 7.91114L3.79205 7.91114C3.67602 7.91114 3.56474 7.86505 3.48269 7.783C3.40065 7.70095 3.35455 7.58967 3.35455 7.47364C3.35455 7.35761 3.40065 7.24633 3.48269 7.16428C3.56474 7.08223 3.67602 7.03614 3.79205 7.03614L9.44455 7.03614L7.85789 5.44947Z" fill="%230064CF"/></svg>');
}
@media (max-width: 900px) {
  .list__detailButton::after {
    right: 28px;
  }
}
.list__detailButton:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 14px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-image: url('data:image/svg+xml,<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="13.5" y="1" width="13" height="13" rx="6.5" transform="rotate(90 13.5 1)" stroke="white"/><path d="M7.85789 5.47584C7.8149 5.43579 7.78042 5.38749 7.75651 5.33382C7.7326 5.28016 7.71974 5.22222 7.71871 5.16348C7.71767 5.10474 7.72848 5.04639 7.75048 4.99191C7.77248 4.93743 7.80524 4.88795 7.84678 4.8464C7.88832 4.80486 7.93781 4.77211 7.99229 4.7501C8.04676 4.7281 8.10511 4.71729 8.16386 4.71833C8.2226 4.71937 8.28053 4.73222 8.3342 4.75614C8.38787 4.78005 8.43617 4.81452 8.47622 4.85751L10.8096 7.19084C10.8915 7.27287 10.9375 7.38407 10.9375 7.50001C10.9375 7.61595 10.8915 7.72714 10.8096 7.80918L8.47622 10.1425C8.43617 10.1855 8.38787 10.22 8.3342 10.2439C8.28053 10.2678 8.2226 10.2807 8.16386 10.2817C8.10511 10.2827 8.04676 10.2719 7.99229 10.2499C7.93781 10.2279 7.88832 10.1952 7.84678 10.1536C7.80524 10.1121 7.77248 10.0626 7.75048 10.0081C7.72848 9.95363 7.71767 9.89528 7.71871 9.83654C7.71974 9.77779 7.7326 9.71986 7.75651 9.66619C7.78042 9.61253 7.8149 9.56423 7.85788 9.52418L9.44455 7.93751L3.79205 7.93751C3.67602 7.93751 3.56474 7.89141 3.48269 7.80937C3.40065 7.72732 3.35455 7.61604 3.35455 7.50001C3.35455 7.38398 3.40065 7.2727 3.48269 7.19065C3.56474 7.1086 3.67602 7.06251 3.79205 7.06251L9.44455 7.06251L7.85789 5.47584Z" fill="white"/></svg>');
}
@media (max-width: 900px) {
  .list__detailButton:hover::after {
    right: 28px;
  }
}
@media (max-width: 900px) {
  .list__detailButton {
    padding: 12px 0;
    padding-right: 16px;
    text-align: center;
  }
}
.list__detailButton--wrapper {
  width: 100%;
}
.list__reserveButton {
  padding: 12px 64px;
  color: white;
  padding: 12px 40px 12px 48px;
}
.list__reserveButton--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.list__reserveButton--wrapper:hover .hover-reverse-bg::before, .list__reserveButton--wrapper:hover .hover-reverse-bg::after {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.list__reserveButton--wrapper:hover .hover-reverse-bg::before {
  opacity: 0;
}
.list__reserveButton--wrapper:hover .hover-reverse-bg::after {
  opacity: 1;
}
.list__reserveButton--wrapper .hover-reverse-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.list__reserveButton--wrapper .hover-reverse-bg::before, .list__reserveButton--wrapper .hover-reverse-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.list__reserveButton--wrapper .hover-reverse-bg::before {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #00a5f6), to(#004eea));
  background: linear-gradient(270deg, #00a5f6 10.5%, #004eea 100%);
  opacity: 1;
}
.list__reserveButton--wrapper .hover-reverse-bg::after {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #004eea), to(#00a5f6));
  background: linear-gradient(270deg, #004eea 10.5%, #00a5f6 100%);
  opacity: 0;
}
.list__reserveButton--wrapper:hover {
  opacity: 1;
}
.list__reserveButton:hover {
  cursor: pointer;
}
.list__reserveButton--wrapper {
  width: 100%;
}
.list__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.list__detail--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.list__detail--rowWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .list__detail--rowWrapper {
    gap: 12px;
    margin-bottom: 12px;
  }
}
.list__detail--icon {
  width: 24px;
  height: 24px;
}

.detail__title {
  margin-bottom: 24px;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 900px) {
  .detail__title {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
  }
}
.detail__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .detail__info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.detail__status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-right: 24px;
}
@media (max-width: 900px) {
  .detail__status {
    margin-right: 0;
  }
}
.detail__status .recruiting, .detail__status .ongoing {
  padding: 2px 16px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  border-radius: 160px;
}
.detail__status .recruiting {
  background-color: #ececec;
}
.detail__status .ongoing {
  color: white;
  background-color: #0064cf;
}
.detail__status--recruiting {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 16px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  background-color: #fff2ad;
  border: 1px solid #ffe145;
  border-radius: 160px;
}
.detail__price {
  margin-left: auto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #f97930;
  word-break: keep-all;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .detail__price {
    margin-left: 0;
  }
}
.detail__price--amount {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
.detail__price--period {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
.detail__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 32px;
  margin-bottom: 64px;
  background-color: #f5faff;
  border-radius: 10px;
}
@media (max-width: 900px) {
  .detail__list {
    padding: 24px;
  }
}
.detail__list--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 900px) {
  .detail__list--row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
  }
}
.detail__list--row:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 100, 207, 0.15);
}
.detail__list--row:not(:first-child) {
  padding-top: 16px;
}
.detail__list--name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 168px;
  min-width: 168px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  color: #757575;
}
.detail__list--value {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 900px) {
  .detail__list--value {
    margin-left: 32px;
  }
}
.detail__content {
  padding-bottom: 64px;
  margin-bottom: 64px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  border-bottom: 2px solid #cfcfcf;
}
.detail__button {
  padding: 12px 64px;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.detail__button--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.detail__button--wrapper:hover .hover-reverse-bg::before, .detail__button--wrapper:hover .hover-reverse-bg::after {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.detail__button--wrapper:hover .hover-reverse-bg::before {
  opacity: 0;
}
.detail__button--wrapper:hover .hover-reverse-bg::after {
  opacity: 1;
}
.detail__button--wrapper .hover-reverse-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.detail__button--wrapper .hover-reverse-bg::before, .detail__button--wrapper .hover-reverse-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.detail__button--wrapper .hover-reverse-bg::before {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #00a5f6), to(#004eea));
  background: linear-gradient(270deg, #00a5f6 10.5%, #004eea 100%);
  opacity: 1;
}
.detail__button--wrapper .hover-reverse-bg::after {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #004eea), to(#00a5f6));
  background: linear-gradient(270deg, #004eea 10.5%, #00a5f6 100%);
  opacity: 0;
}
.detail__button--wrapper:hover {
  opacity: 1;
}
.detail__button:hover {
  cursor: pointer;
}
.detail__button--wrapper {
  margin: 24px auto 0;
}
.detail__flowList {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.detail__flowList--wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  list-style-position: outside;
  list-style-type: disc;
}

.complete__finish {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 640px;
  padding: 24px 16px 48px;
  border: 1px solid #0064cf;
  border-radius: 10px;
}
@media (max-width: 900px) {
  .complete__finish {
    min-width: 100%;
    padding: 24px 24px 48px;
  }
}
.complete__finish--text {
  margin-bottom: 8px;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #007d32;
  text-align: center;
  word-break: keep-all;
}
@media (max-width: 900px) {
  .complete__finish--text {
    margin-bottom: 16px;
  }
}
.complete__finish--text2 {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
}
@media (max-width: 900px) {
  .complete__finish--text2 {
    text-align: left;
  }
}
.complete__button {
  padding: 12px 64px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: white;
}
.complete__button--wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.complete__button--wrapper:hover .hover-reverse-bg::before, .complete__button--wrapper:hover .hover-reverse-bg::after {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.complete__button--wrapper:hover .hover-reverse-bg::before {
  opacity: 0;
}
.complete__button--wrapper:hover .hover-reverse-bg::after {
  opacity: 1;
}
.complete__button--wrapper .hover-reverse-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.complete__button--wrapper .hover-reverse-bg::before, .complete__button--wrapper .hover-reverse-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.complete__button--wrapper .hover-reverse-bg::before {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #00a5f6), to(#004eea));
  background: linear-gradient(270deg, #00a5f6 10.5%, #004eea 100%);
  opacity: 1;
}
.complete__button--wrapper .hover-reverse-bg::after {
  background: -webkit-gradient(linear, right top, left top, color-stop(10.5%, #004eea), to(#00a5f6));
  background: linear-gradient(270deg, #004eea 10.5%, #00a5f6 100%);
  opacity: 0;
}

.modal__inner {
  height: auto;
}
.modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  padding: 32px 48px;
  border-top: 1px solid #ddd;
}
@media (max-width: 900px) {
  .modal__footer {
    padding: 24px 16px;
  }
}
.modal__footer--buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 900px) {
  .modal__footer--buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 24px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0;
  }
}
.modal__footer--text {
  padding: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
  background-color: #f7f7f7;
}
@media (max-width: 900px) {
  .modal__footer--text {
    padding: 12px 16px;
    text-align: left;
  }
}