@media screen and (min-width: 0px) {
  #contact-us .hero {
    position: relative;
  }

  #contact-us .hero .hero-gb {
    height: 220px;
    overflow: hidden;
  }

  #contact-us .hero .hero-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  #contact-us .hero .hero-gb img {
    height: 100%;
    object-fit: cover;
  }

  #contact-us #s1 {
    padding: var(--section-padding) var(--page-padding);
  }

  #contact-us #s1 .title-tabs {
    max-width: 480px;
    margin: 0 auto;
    border-bottom: 1px solid var(--color-gray);
  }

  #contact-us #s1 .title-tabs li {
    width: fit-content;
    padding: 4px 0;
    border-bottom: 4px solid var(--color-leaf);
    font-weight: 500;
  }

  #contact-us #s1 .distributor-list {
    max-width: 380px;
    margin: var(--margin-l) auto 0;
  }

  #contact-us #s1 .distributor-list .region {
    font-weight: 500;
    margin: 4px 0 var(--margin-m);
  }

  #contact-us #s1 .distributor-list li {
    display: flex;
    gap: var(--margin-xm);
    padding: var(--margin-xxl) 0;
  }

  #contact-us #s1 .distributor-list li:not(:last-child) {
    border-bottom: 1px solid var(--color-gray);
  }
}

@media screen and (min-width: 768px) {}

@media screen and (min-width: 1024px) {
  #contact-us .hero .hero-gb {
    height: 260px;
  }
}