@use "../../../../src/scss/utilities.scss";
.gridsTabs_vertical {
  //max-width: 1320px;
  margin: auto;
  h2{
    color: #004976;
  }
  h3{
    font-size: 1.2rem !important;
    color: #27251f;
    @extend %openSans-font;
  }
  &__title {
    @extend %VFSans-font;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.37;
    color: var(--a-negro-unops);
    @media (max-width: 991.98px) {
      font-size: 25px;
    }
  }
  &__content {
    .nav.nav-pills{
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 520px; 
      @media (max-width: 991.98px) {
        min-height: 100%;
        flex-direction: row;
      }
      height: 100%;
      .nav-link {
        border-radius: 0px;
        cursor: pointer;
        border: solid 1px #d2f1ff;

          .gridsTabs_vertical__content--itemTitle .gridsTabs_vertical__content--title{
            background-color: transparent;
            color: #27251f;
          }
          &.active {
            position: relative;
            background-color: var(--cerulean);
            border: solid 1px var(--cerulean);
            .gridsTabs_vertical__content--itemTitle .gridsTabs_vertical__content--title{
              color: var(--a-blanco);
            }
          }
      }
    }
    @media (max-width: 991.98px) {
      min-height: 200px;
    }
    &--itemTitle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: var(--a-blanco);
    }
    &--title {
      @extend %VFSans-font;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 1.37;
      letter-spacing: normal;
      color: var(--b-medianoche);
      @media (max-width: 991.98px) {
        font-size: 1rem;
      }
    }
  }
  &__body {
    &--part1 {
      background-color: var(--cerulean);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .descriptionList {
        color: var(--a-blanco);
        @extend %link-blue;
        p {
          margin: revert;
          @extend %link-blue;
        }
        strong {
          color: var(--a-blanco);
        }
      }
      .btnArrow{
        padding: 1rem;
        color: var(--a-blanco);
        border: 1px solid var(--a-blanco);
        width: fit-content;
      }
    }
    &--contentImg {
      position: relative;
      .img-absolute {
        @extend %img-absolute;
        object-position: top;
      }
    }
    &--title {
      @extend %VFSans-font;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 1.37;
      letter-spacing: normal;
      color: var(--a-blanco);
      @media (max-width: 991.98px) {
        font-size: 1rem;
      }
    }
  }

}