@use '../../../../src/scss/utilities.scss';
.tBanner {
  //max-width: 1320px;
  height: 100%;
  margin: auto;
  min-height: 450px;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  &::after {
    z-index: -1;
    display: block;
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));;
    mix-blend-mode: multiply
  }
  &--blue{
    &::after{
      background: rgba(0, 83, 158, 0.91);
    }
  }
  .btn-primary {
    @extend %VFSans-font;
    font-size: 20px;
    font-weight: 600;
    &,
    &::hover {
      color: var(--a-blanco);
    }
  }
  &__title {
    @extend %VFSans-font;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.37;
    color: var(--a-blanco);
  }
  &__description {
    @extend %VFSans-font;
    font-size: 20px;
    font-style: normal;
    line-height: 1.27;
    color: var(--a-blanco);
    h2,h3,h4,h5{
      color: var(--a-blanco);
    }
    @media (max-width: 991.98px) {
      font-size: 15px;
    }
    p {
      margin-top: 0px;
      margin-bottom: 0px;
    }
  }
  &__img {
    @extend %img-absolute;
    z-index: -1;
  }
  &__cta{
    gap: 1rem;
    color: var(--a-blanco);
    background-color: var(--b-cereza);
    border: none;
    width: fit-content;
    .btnArrow svg {
      color: var(--a-blanco);
      fill: var(--a-blanco);
      stroke: var(--a-blanco);
    }
    &:hover{
      color: var(--a-blanco);
      .btnArrow svg{
        color: var(--a-blanco);
        fill: var(--a-blanco);
        stroke: var(--a-blanco);
      }
    }
  }
}