.hero .section-container {
   width: 100%;
   max-width: calc(var(--spacing) * 125);
   position: relative;
}

/* col-right */

.hero .contact .col-right .card-3:nth-of-type(4) .wave-2 {
   bottom: -29px;
}

.hero .text {
   margin: calc(var(--spacing) * 6) 0 0 0;
   width: 100%;
   text-align: center;
}

.hero .text .contact-text {
   margin: 0;
}
.hero .text .contact-text:nth-of-type(2) {
   margin: var(--spacing) 0 0 0;
}

.text .Thx {
   font-family: var(--home-font);
   font-size: 2.5rem;
   margin-top: 8px;
   font-weight: 600;
}

@media only screen and (max-width: 836px) {
   .card-3 {
      padding: 8px;
      box-sizing: border-box;
      width: calc(var(--spacing) * 25);
   }

   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -29px;
   }
}
@media only screen and (max-width: 836px) {
   main .hero .contact .col-right a {
      height: fit-content;
   }

   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -10px;
   }
   .hero .text {
      position: relative;
      bottom: 9%;
   }
}
@media only screen and (max-width: 588px) {
   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -20px;
   }
}
@media only screen and (max-width: 500px) {
   main .hero .contact .col-right .card-3 {
      width: 100%;
      margin: calc(var(--spacing) * 4) 0 0 0;
   }
   main .hero .section-container .contact .col-right {
      display: block;
      height: fit-content;
   }
   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -10px;
   }
   .hero .text {
      bottom: 0;
   }
}

@media only screen and (max-width: 310px) {
   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -30px;
   }
}
@media only screen and (max-width: 250px) {
   .card-3 p.card-3-text {
      font-size: 7vw;
   }
}
@media only screen and (max-width: 224px) {
   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -40px;
   }
}
@media only screen and (max-width: 188px) {
   .card-3:nth-last-of-type(1) .wave-2 {
      bottom: -50px;
   }
}