@media screen and (max-width: 1280px) {
  .title {
    font-size: 5rem;
  }

  .about-event .image {
    width: 40rem;
    height: 47rem;
  }

  .about-event p {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
  }

  .container {
    padding: 0 40px;
  }

  .tshirt .tshirt-area {
    width: 10rem;
    height: 10rem;
  }

  .tshirt-model {
    width: 40rem;
    height: 34rem;
  }

  .tshirt-view {
    gap: 2rem;
  }

  .image-grid img {
    max-width: 50rem;
  }

  .juv-text p {
    font-size: 1.6rem;
  }

  .juv .badge div {
    width: 9rem;
  }

  .thanks .left .content {
    padding-left: 4rem;
  }
}

@media screen and (max-width: 1120px) {
  .thanks .left .content p {
    font-size: 1.7rem;
  }

  .thanks .left .content .paragraph {
    max-width: none;
  }

  .thanks .left .content h1 {
    font-size: 4.5rem;
  }
}

@media screen and (max-width: 1100px) {
  .about-event .about-section {
    flex-direction: column;
    align-items: center;
  }

  .about-event .about-texts {
    max-width: 100%;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-event .title {
    text-align: center;
  }

  .about-event .image {
    width: 60rem;
    height: 60rem;
    margin-bottom: 3rem;
  }

  .btn-none-mobile {
    display: none;
  }

  .btn-none {
    display: block;
  }

  .tshirt-text .text-area {
    width: 35rem;
    height: 5.8rem;
    font-size: 4rem;
  }

  .tshirt-text {
    gap: 1.6rem;
  }

  .container.about-event {
    padding-bottom: 2rem;
  }
  .juv .badge div {
    width: 8rem;
  }
}

@media screen and (max-width: 1024px) {
  .title {
    margin-bottom: 2rem;
  }

  .header .nav {
    font-size: 1.8rem;
  }

  .form.container {
    flex-direction: column;
  }

  .form .right {
    max-width: none;
    text-align: center;
  }

  .form .right p {
    max-width: 360px;
    margin: 0 auto;
  }

  .form .conf {
    display: none;
  }

  .form .conf.mobile {
    display: block;
  }

  .form .left {
    max-width: none;
  }

  .tshirt-container {
    flex-direction: column;
  }

  .tshirt .title {
    text-align: center;
  }

  .tshirt-text {
    align-items: center;
  }

  .tshirt-text .text-area {
    padding-left: 0;
  }

  .text-area p {
    text-align: center;
    width: 100%;
  }

  .tshirt-grid {
    margin-bottom: 6rem;
    justify-content: center;
  }

  .juv-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .juv-text {
    max-width: 100%;
  }

  .juv .title {
    text-align: center;
  }

  .juv h3 {
    text-align: center;
  }

  .image-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .image-grid p {
    font-size: 1.8rem;
  }

  .image-grid img {
    width: 65rem;
  }

  .address {
    flex-direction: column;
  }

  .address .left {
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 4rem;
    flex: auto;
  }

  .address .right {
    flex: auto;
    height: 40rem;
  }

  .container.address {
    padding-bottom: 3rem;
  }

  .juv .badge {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .juv .badge div {
    width: 10rem;
    height: 3rem;
    min-width: 6rem;
  }

  .thanks .right {
    background-size: contain;
  }

  .thanks .left .content h1 {
    font-size: 4rem;
  }

  .thanks .left .content p {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 864px) {
  .thanks {
    grid-template-columns: 1fr 0;
  }

  .thanks .left .content {
    width: 100%;
    padding-right: 4rem;
    text-align: center;
    align-items: center;
  }

  .thanks .left .content .paragraph {
    justify-content: center;
    align-items: center;
  }

  .thanks .left .content .conf {
    display: block;
  }

  .thanks .left .content .paragraph p {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .header .nav {
    display: none;
  }

  .header .contact .instagram {
    display: none;
  }

  .header .contact {
    justify-content: center;
  }

  .header .mobile-menu-btn {
    display: block;
  }

  .footer.container {
    padding-top: 5rem;
  }

  .footer .main {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .footer .left .social-item {
    justify-content: center;
    text-align: center;
  }

  .footer .center {
    order: 1;
  }

  .footer .left {
    order: 2;
    text-align: center;
  }

  .footer .right {
    order: 2;
  }

  .footer .right ul li {
    text-align: center;
  }

  .about-event .image {
    width: 50rem;
    height: 50rem;
    margin-bottom: 2rem;
  }

  .image-grid img {
    width: 55rem;
  }

  .address .right {
    min-width: 30rem;
  }
}

@media screen and (max-width: 640px) {
  .container,
  .thanks .left .content {
    padding: 0 20px;
  }

  .hero {
    height: 100%;
    padding: 0 20px 50px 20px;
  }

  .form .left .input-group-radio div {
    gap: 1rem;
  }

  .form .left .input-group-radio .radio-label {
    padding: 0 1rem;
  }

  .about-event .image {
    width: 40rem;
    height: 40rem;
  }

  .about-event .about-texts {
    margin-bottom: 2rem;
  }

  .tshirt-view {
    flex-direction: row;
  }

  .tshirt-grid {
    flex-direction: column-reverse;
    align-items: center;
  }

  .tshirt .tshirt-area {
    width: 12rem;
    height: 10rem;
  }

  .image-grid img {
    width: 100%;
    max-width: 42rem;
  }

  .address .left {
    flex-direction: column;
    align-items: center;
  }

  .address .text-infor {
    text-align: center;
  }
}

@media screen and (max-width: 475px) {
  .mobile-area .mobile-menu {
    max-width: none;
    width: 100%;
  }

  .hero .conf {
    margin-top: 180px;
  }

  .hero .conf em {
    font-size: 2.3rem;
  }

  .hero .conf h1 {
    font-size: 9rem;
  }

  .hero .conf em.date {
    font-size: 1.8rem;
  }

  .hero .count-down {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .verses p {
    font-size: 1.2rem;
  }

  .form .left .input-group-grid {
    grid-template-columns: 1fr;
  }

  .form .left .input-group-radio div {
    flex-direction: column;
  }

  .form .left .input-group-radio .radio-label {
    max-width: max-content;
  }

  .form .btn {
    max-width: none;
  }

  .footer .signature {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .about-event .image {
    width: 32rem;
    height: 32rem;
  }

  .title {
    font-size: 4rem;
  }

  .subtitle {
    font-size: 2.4rem;
  }

  .tshirt-model {
    width: 32rem;
    height: 28rem;
  }

  .tshirt .tshirt-area {
    width: 9.4rem;
    height: 8rem;
  }

  .image-grid img {
    width: 100%;
    max-width: 35rem;
  }

  .tshirt-text .text-area {
    width: 32rem;
    height: 5.8rem;
    font-size: 3.5rem;
  }

  .tshirt-text h3 {
    font-size: 2.4rem;
  }

  .tshirt-text .price {
    font-size: 8.5rem;
  }
}