@use "../../../../src/scss/utilities.scss";
.bgImgFBlock {
  //max-width: 1320px;
  margin: auto;
  h2{
    color: var(--b-medianoche);
  }
  &__title {
    @extend %VFSans-font;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.37;
    color: var(--a-negro-unops);
    @media (max-width: 991.98px) {
      font-size: 25px;
    }
  }
  &__description {
    @extend %openSans-font;
    font-size: 18px;
    font-weight: 300;
    color: var(--a-blanco);
    strong {
      font-weight: 600;
    }
    em,
    a {
      font-style: normal;
      font-weight: 600;
      color: #00b2ff;
    }
    .quote{
      color: var(--a-blanco);
    }
    .autor{
      color: #00b2ff;
    }
  }
  &__content {
    position: relative;
    min-height: 500px;
    @media (max-width: 991.98px) {
      min-height: 370px;
    }
  }
  .img-absolute {
    @extend %img-absolute;
    width: 65%;
  }
  &__block {
    position: relative;
    min-height: 350px;
    background-color: var(--b-medianoche);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    @media (min-width: 768px) {
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      right: 0%;
    }
    @media (max-width: 991.98px) {
      right: 0%; 
    }
    
  }
  &__bottom{
    .img-absolute {
      width: 100%;
      height: 80%;
    }
    .bgImgFBlock__block{
       min-height: 300px;
       transform: unset;
       right: 30%;
       top: 40%;
       @media (max-width: 991.98px) {
        right: 0%; 
        top: 0%;
      }
    }
  }
  &__aditionaltext{
    font-size: 1.1rem;
  }
}