.contact {
  display: grid;
  grid-template-columns: 4fr 5fr;
  grid-gap: 0 2rem;
  padding: 6rem 1rem;

  .details {
    padding: 0 0 0 .25rem;

    h1 {
      font-size: 1.15rem;
      font-weight: 400;
      margin: .5rem 0;
    }

    h2 {
      font-size: 1.75rem;
      font-weight: 600;
      margin: .5rem 0;
    }

    p {
      font-weight: 300;
      padding: 0 2rem .5rem 0;
    }

    .mail,
    .meeting,
    .office {
      margin: 1rem 0;

      span {
        position: relative;
        top: .2rem;
        font-size: 1.25rem;
        padding: 0 .75rem 0 .25rem;
      }
  
      a {
        position: relative;
        color: var(--l-color);
  
        &:after {
          content: '';
          position: absolute;
          width: 100%;
          bottom: -1px;
          left: 0;
          right: 0;
          border-bottom: 1px dotted var(--l-color);
        }
      }
    }
  }

  form {
    grid-column: 2;

    label small {
      color: var(--ft-color);
      font-size: .75rem;
      font-weight: 400;
      margin: 0 .15rem;
      text-transform: lowercase;
    }

    button {
      margin: .5rem 0 0 0;
    }

    .message {
      grid-column: 1/3;
    }
  }

  .success {
    grid-column: 2;
    padding: 0 0 2rem 0;
    margin: 0 1rem;
    text-align: center;

    .icon-sent {
      color: var(--p-color);
      font-size: 4rem;
      padding: 1rem .5rem 2rem 0;
    }

    h3 {
      font-size: 1.5rem;
      font-weight: 600;
      margin: .5rem 0;
    }

    p {
      font-weight: 300;
    }
  }
}

@media only screen and (--viewport-4) {
  .contact {
    display: block;
    padding: 2rem 2.25rem 4rem 2.25rem;
  
    .details {
      padding: 2rem 0;

      p {
        padding: 0 0 .5rem 0;
      }
    }
  }
}