.banner-v01__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--gap);
}

.banner-v01__title {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(var(--color-foreground), 0.9);
  font-size: clamp(3rem, calc(2.5vw + 2rem), 5rem);
  line-height: 1.3em;
  margin: 2.5rem 0;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.banner-v01__desc {
  color: rgba(var(--color-foreground), 0.7);
}

.banner-v01__image1,
.banner-v01__image2 {
  width: 100%;
  height: auto;
}
.banner-v01__image1 .xo-image,
.banner-v01__image2 .xo-image {
  height: 100%;
}
.banner-v01__image1 .xo-image img,
.banner-v01__image2 .xo-image img {
  height: 100%;
}

@media (max-width: 991px) {
  .banner-v01__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .banner-v01__border-lb {
    grid-row: 4;
  }
}
.banner-v01__text {
  padding-bottom: 4rem;
}

.banner-v01__border--full {
  border: 0.1rem solid rgba(var(--color-accent));
}

.banner-v01__border-tr {
  border-top: 0.1rem solid rgba(var(--color-accent));
  border-right: 0.1rem solid rgba(var(--color-accent));
}

.banner-v01__border-lb {
  border-bottom: 0.1rem solid rgba(var(--color-accent));
  border-left: 0.1rem solid rgba(var(--color-accent));
}

.banner-v01__border-tr,
.banner-v01__border-lb {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, calc(6.875vw - 1.25rem), 7rem);
}

.banner__v01--decor1,
.banner__v01--decor2 {
  position: absolute;
  z-index: -1;
}
.banner__v01--decor1 svg,
.banner__v01--decor2 svg {
  fill: inherit !important;
  stroke: rgba(var(--color-accent)) !important;
  stroke-width: 2;
}
.banner__v01--decor1 svg path,
.banner__v01--decor2 svg path {
  fill: #fff;
}

.banner__v01--decor1 {
  right: 25%;
  bottom: 15%;
}

.banner__v01--decor2 {
  animation: bounce_shake 2s ease-out;
  animation-delay: 10s;
  animation-iteration-count: infinite;
  right: 20%;
  bottom: 10%;
}
.banner__v01--decor2 svg {
  max-width: clamp(15rem, calc(15.8227848101vw + 2.8481012658rem), 25rem);
}

@keyframes bounce_shake {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-2px);
  }
  32% {
    transform: scale(1.2) translateY(-2px);
  }
  35%, 40% {
    transform: scale(1.2) translateY(-2px) rotate(-2deg);
  }
  45%, 50% {
    transform: scale(1.2) translateY(-5px) rotate(20deg);
  }
  60% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  70% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  80% {
    transform: scale(1, 1) translateY(-3px);
  }
  95% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}