.vrs-hero-column-left {
  overflow: hidden;
  position: relative;

  &::before {
    background: url("/wp-content/themes/vrs2024/assets/images/three-vertical-bars.svg")
      no-repeat left top;
    background-size: contain;
    content: "";
    display: block;
    height: 43%;
    left: 3%;
    position: absolute;
    top: 0;
    width: 14.66%;
    z-index: 1;
  }

  &::after {
    background: linear-gradient(
      75deg,
      transparent 50%,
      var(--wp--preset--color--base) 50%
    );
    content: "";
    display: block;
    height: 101%;
    position: absolute;
    right: -1px;
    top: -1px;
    width: 25%;
    z-index: 1;
  }

  & .wp-block-image {
    margin: 0;
  }
}

.vrs-hero-heading {
  line-height: 1.1;
}

@media (max-width: 769px) {
  .vrs-hero-column-right {
    & > .wp-block-group {
      padding: 20px 20px 60px 20px !important;
    }
  }

  .vrs-hero-heading {
    font-size: var(--wp--preset--font-size--x-large) !important;
  }

  .vrs-hero-body {
    font-size: var(--wp--preset--font-size--small) !important;
    margin: 1.5rem auto !important;
  }
}

@media (min-width: 770px) and (max-width: 1023px) {
  .vrs-hero-columns {
    display: block !important;
  }

  .vrs-hero-column-right > .wp-block-group {
    display: grid;
    gap: 30px;
    grid-template-areas:
      "heading body"
      "heading buttons";
    grid-template-columns: 45% 1fr;
    grid-template-rows: repeat(2, auto);
    padding: 25px 25px 40px !important;
  }

  .vrs-hero-heading {
    font-size: var(--wp--preset--font-size--x-large) !important;
    grid-area: heading;
  }

  .vrs-hero-body {
    grid-area: body;
  }

  .vrs-hero-buttons {
    grid-area: buttons;
    margin: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .vrs-hero-column-left {
    &::before {
      height: 33%;
      width: 12%;
    }

    &::after {
      width: 30%;
    }

    & figure,
    & img {
      height: 100%;
    }
  }

  .vrs-hero-column-right {
    align-items: center;
    display: flex;
    padding: 20px !important;
  }
}

@media (min-width: 1400px) {
  .vrs-hero-heading {
    margin-bottom: 1.5rem;
    padding-right: 100px !important;
  }

  .vrs-hero-column-left {
    &::before {
      height: 33%;
      width: 10%;
    }

    & figure,
    & img {
      min-height: 100%;
    }
  }

  .vrs-hero-column-right {
    align-items: center;
    display: flex;
  }

  .vrs-hero-body {
    padding-right: 100px !important;
  }
}