.banner_page {
  & > div {
    gap: 78px;
  }

  & .content {
    max-width: 33rem;
    margin-right: auto;

    & p:first-child {
      font-weight: bold;
      font-size: 1.125rem;
      color: var(--blue-100);
      margin-bottom: 10px;
    }

    & h1 {
      font: var(--font-h1);
      color: var(--gray-900);
      margin-bottom: 2rem;
    }

    & p {
      font-size: 1.125rem;

      & a {
        display: inline-flex;
        justify-content: center;
        min-width: 410px;
        padding-block: 1.25rem;
        margin-top: 60px;
      }
    }
  }
}

.info_page {
  padding-top: 42px;
  padding-bottom: 107px;

  & h2 {
    font: var(--font-h2);
    text-align: center;
    color: var(--gray-900);
  }

  & > div > .row:nth-child(2) {
    margin-block: 60px;
    padding-block: 50px;
    border-top: 1px solid #70707033;
    border-bottom: 1px solid #70707033;

    & > div:first-child {
      padding-left: 0;
    }

    & > div {
      border-right: 1px solid #70707033;
      padding: 15px 60px;

      & h4 {
        font: var(--font-h4);
        font-weight: bold;
        color: var(--gray-900);
        max-width: 15ch;
        margin-bottom: 1.25rem;
      }
    }

    & > div:last-child {
      border-right: none;
      padding-right: 0;

      & h4 {
        max-width: 100%;
      }
    }
  }

  & .btn_site {
    display: inline-flex;
    justify-content: center;
    padding-block: 20px;
  }
}

@media (max-width: 1400px) {
  .banner_page {
    & img {
      max-width: 50%;
      object-fit: cover;
      height: 550px;
    }
  }
}

@media (max-width: 992px) {
  .banner_page {
    & > div {
      gap: 2rem;
    }
    & img {
      height: 400px;
    }
    & .content {
      max-width: 100%;

      & h1 {
        font: var(--font-h2);
      }
    }
  }

  .info_page {
    & > div > .row:nth-child(2) {
      margin-block: 30px;
      padding-block: 25px;

      & > div {
        padding: 15px 30px;
      }
    }
  }
}

@media (max-width: 768px) {
  .banner_page {
    text-align: center;

    & img {
      max-width: 100%;
      height: fit-content;
    }

    & .content {
      padding-inline: 1.5rem;
    }
  }

  .info_page {
    & > div > .row:nth-child(2) {
      & > div {
        text-align: center;
        border-right: none;
        border-bottom: 1px solid #70707033;

        & h4 {
          max-width: 100%;
        }
      }

      & > div:first-child {
        padding-left: 30px;
      }

      & > div:last-child {
        padding-right: 30px;
        border-bottom: none;
      }
    }
  }
}