#contacto {
  
  padding: var(--spacing-xl) var(--spacing-md);
  margin: 0 auto;

  .title {
    color: var(--dark-blue);
    text-align: center;

    @media (min-width: 1024px) {
      text-align: left;
    }

  }

  .contact__map_container {
    display: flex;
    flex-direction: column;
    height: 400px;

    iframe {
      border: 0;
      width: 100%;
      height: 100%;
    }

    @media (min-width: 1024px) {
      margin: 0 auto;
      width: 85%;
    }

    @media (min-width: 1480px) {
      max-width: 60%;
    }


  }

  @media (min-width: 768px) {
    max-width: 620px;
  }

  @media (min-width: 1024px) {
    max-width: 880px;
  }

  @media (min-width: 1280px) {
    max-width: 1000px;
  }

  @media (min-width: 1480px) {
    max-width: 1300px;
  }
}