#content p {
 text-indent: -20px;
 margin: 0 0 2px 20px;
 padding: 0;
}

  .grid-container {
    display: grid;
    /*gap: 10px;*/
    /*background-color: #2196F3;*/
  }

  .grid-container > div {
    /*background-color: rgba(255, 255, 255, 0.8);*/
  }

  .title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0px 20px 0px;
  }

  .sportsman {
    display: grid;
  }

  .picture {
    grid-column: 1;
    grid-row: 1;
  }
  
  .data {
    grid-column: 2;
    grid-row: 1;
    padding-left: 20px;
  }

  .name {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  .results {
    text-align: left;
    font-size: 12px;
  }


@media only screen and (max-width: 600px) {

  .grid-container {
    grid-template-columns: auto 10fr 40fr auto;
    grid-template-rows: auto repeat(7, auto 30px);
    padding: 0px;
  }

  .grid-container > div {
    padding: 0px;
  }

  .title {
    grid-column: 1 / span 4;
  }

  .sportsman {
    grid-template-columns:10fr 40fr;
    grid-template-rows: auto 30px;
    grid-column: 2 / span 2;
    grid-row: span 2;
    align-content: start;
  }

  .picture {
  }
  
  img {
    width: 105px;
    height: 135px;
  }

  .data {
  }

  .results {
  }
}

@media only screen and (min-width: 601px) and (max-width: 1250px) {

  .grid-container {
    grid-template-columns: auto 140px 435px auto;
    grid-template-rows: auto repeat(7, auto 30px);
    padding: 0px;
  }

  .grid-container > div {
    padding: 0px;
  }

  .title {
    grid-column: 1 / span 4;
  }

  .sportsman {
    grid-template-columns:140px 435px;
    grid-template-rows: auto 30px;
    grid-column: 2 / span 2;
    grid-row: span 2;
  }

  .picture {
  }

  .data {
  }

  .results {
  }
}

@media only screen and (min-width: 1251px) {

  .grid-container {
    grid-template-columns: auto 140px 435px 50px 140px 435px auto;
    grid-template-rows: auto-fit auto repeat(4, auto 30px);
    padding: 20px;
  }

  .grid-container > div {
  }

  .title {
    grid-column: 1 / span 7;
  }

  .sportsman {
    grid-template-columns:140px 435px;
    grid-template-rows: auto 30px;
    grid-row: span 2;
  }

  .picture {
  }

  .data {
  }

  .results {
  }

  #row1 {
    grid-column: 2 / span 2;
  }

  #row2 {
    grid-column: 5 / span 2;
  }
}