/* banners */
.banners-items {
  display: flex;
  flex-wrap: wrap;

  & .banners-item {
    height: 720px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 40px;
    width: 50%;
    border: 1px solid #193026;
    border-top: none;
    @media(max-width: 576px) {
      padding: 16px;
      width: 100%;
    }

    & .banners-item__image {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: all .3s;
      }


    }

    & .banners-item__title {
      color: var(--White, #FFF);
      font-family: var(--title-font);
      margin-bottom: 8px;
      font-size: 40px;
      font-style: normal;
      font-weight: 400;
      line-height: 48px;
      /* 120% */
      position: relative;
      z-index: 2;
      max-width: 640px;

      @media(max-width: 576px) {
        font-size: 32px;
        line-height: 125%;
      }
    }

    & .banners-item__subtitle {
      color: var(--White, #FFF);
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 21px;
      /* 131.25% */
      margin-bottom: 24px;
      position: relative;
      z-index: 2;
      max-width: 640px;
    }

    & .banners-item__btns {
      display: flex;
      gap: 8px;
      position: relative;
      z-index: 2;
    }

    &:first-child {
      width: 100%;
      border-bottom: 1px solid #193026;
    }

    &:last-child {
      border-left: none;
    }

    &:hover {
      & img {
        transform: scale(1.1);
        transition: all .3s;
      }
    }
  }
}

/* banners end */