.banner {
  display: flex;
  background: url("https://on-c2-cmshub-public.s3.ap-southeast-3.amazonaws.com/hero_banner_isic_desktop_281fafddc4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 770px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 85px 60px;
  align-items: center;
  gap: 80px;
  border-radius: 12px;
  position: relative;
  z-index: 1 !important;
  border: 3px solid rgb(198, 198, 198);
}

.left {
  color: white;
  font-size: 26px;
  font-weight: 500;
  text-wrap: balance;
}

.right {
  width: 320px;
  height: auto;
}

@media screen and (max-width: 820px) {
  .banner {
    margin: 0 16px;
  }

  .left {
    font-size: 22px;
  }

  .right {
    width: 240px;
  }
}

@media screen and (max-width: 600px) {
  .banner {
    gap: 32px;
    flex-direction: column-reverse;
    background: url("https://on-c2-cmshub-public.s3.ap-southeast-3.amazonaws.com/hero_banner_isic_mobile_7f020e8be3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .left {
    text-align: center;
    font-size: 20px;
  }

  .right {
    width: 180px;
  }
}