@charset "UTF-8";
/* CSS Document */

body {
  font-family: 'dinpro-regular';
}

body, html {
  height: 100%;
  display: grid;
}

.container {
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 2;
  grid-gap: 16px;
}

.name, .corp {
  font-size: 3em;
  padding: 0;
  line-height: 1;
  vertical-align: baseline;
  grid-row-start: 1;
  grid-row-end: 1;
}

.name {
  grid-column-start: 2;
  grid-column-end: 2;
  text-align: right;
}

.corp {
  grid-column-start: 3;
  grid-column-end: 3;
  margin-top: 1px;
}

.subline {
  grid-row-start: 2;
  grid-row-end: 2;
  font-size: 1em;
  grid-column-start: 2;
  grid-column-end: 4;
  text-align: center;
  width: 100%;
}

strong {
  font-family: 'dinpro-bold';
  font-weight: normal;
}

@media only screen and (max-width: 500px) {
    .container {
      grid-template-rows: 3;
      grid-gap: 0;
    }

    .name, .corp, .subline {
      text-align: center;
      grid-column-start: 2;
      grid-column-end: 3;
      padding: 8px;
    }

    .name, .corp {
      font-size: 2.5em;
    }

    .name {
      grid-row-start: 1;
      grid-row-end: 1;
    }

    .corp {
      grid-row-start: 2;
      grid-row-end: 2;
      margin-top: 0;
    }

    .subline {
      grid-row-start: 3;
      grid-row-end: 3;
    }
}

@media only screen and (max-width: 375px) {
    .name, .corp {
      font-size: 2em;
    }
}

@media only screen and (max-width: 320px) {
    .name, .corp {
      font-size: 1.75em;
      line-height: 0.9;
    }

    .subline {
      font-size: 0.8em;
    }
}