html {
  font-size: 13px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 0px;
}

.grid-container > * {
  grid-column: col-start / span 12;
}

@media (width >= 600px) {
  .content {
    grid-column: col-start 2 / span 10;
  }
  .content.details-header-img-box {
    grid-column: col-start 3 / span 3;
    grid-row: 12;
    justify-content: right;
  }
  .content.details-header-title-box {
    grid-column: col-start 6 / span 5;
    grid-row: 12;
  }
}

@media (width >= 900px) {
  html {
    font-size: 16px;
  }
  .content {
    grid-column: col-start 3 / span 8;
  }
  .content.intro-img-box {
    grid-column: col-start 3 / span 3;
    grid-row: 4;
  }
  .content.intro-text-box {
    grid-column: col-start 6 / span 5;
    grid-row: 4;
  }
  .content.details-header-img-box {
    grid-row: 11;
  }
  .content.details-header-title-box {
    grid-row: 11;
  }
}

@media (width >= 1200px) {
  .join-square {
    width: min(100%, 20rem);
  }
  #join-box1 {
    grid-column: col-start 3 / span 2;
  }
  #join-box2 {
    grid-column: col-start 5 / span 2;
  }
  #join-box3 {
    grid-column: col-start 7 / span 2;
  }
  #join-box4 {
    grid-column: col-start 9 / span 2;
  }
  .content.details-header-img-box {
    grid-row: 8;
  }
  .content.details-header-title-box {
    grid-row: 8;
  }
  .content.details-box {
    flex-direction: row;
  }
}