/* ------------------------ */
/* BELOW 1104 px (69em) */
/* ------------------------ */
@media (max-width: 69em) {
  .header {
    display: grid;
    grid-template-columns: 1fr;
    height: 40vh;
    /* grid-template-rows: 1fr 1fr; */
    /* background-color: blueviolet; */
  }
  .logo-box {
    grid-template-columns: 5fr 95fr;
  }
  .grid--rsales {
    column-gap: 2.4rem;
  }
  .grid--csales {
    column-gap: 2.4rem;
  }
  .rsales-featurebox {
    padding: 2.4rem 1.2rem;
  }
  .csales-featurebox {
    padding: 2.4rem 1.2rem;
  }
  .rsales-feature-item {
    column-gap: 1.2rem;
  }
  .csales-feature-item {
    column-gap: 1.2rem;
  }
  .heading-secondary {
    font-size: 3.6rem;
  }
}

/* ------------------------ */
/* BELOW 912 px (57em) */
/* ------------------------ */
@media (max-width: 57em) {
  .hero.grid {
    column-gap: 4.8rem;
  }
  .cfeatures-grid {
    grid-template-columns: 1fr 1fr;
  }
  .grid--training {
    grid-template-columns: 1fr repeat(8, 2fr) 1fr;
    column-gap: 3.2rem;
  }
  .training-course--1 {
    grid-column: 2 / span 4;
    grid-row: 1;
  }
  .training-course--2 {
    grid-column: 6 / span 4;
    grid-row: 1;
  }
  .training-course--3 {
    grid-column: 2 / span 4;
    grid-row: 2;
  }
  .training-course--4 {
    grid-column: 6 / span 4;
    grid-row: 2;
  }

  .training-course {
    justify-items: center;
  }
  .grid--rsales {
    grid-template-columns: repeat(10, 1fr);
  }
  .rsales-property--1 {
    grid-column: 2 / span 4;
    grid-row: 1;
  }

  .rsales-property--2 {
    grid-column: 6 / span 4;
    grid-row: 1;
  }

  .rsales-property--3 {
    grid-column: 4 / span 4;
    grid-row: 2;
  }

  .grid--csales {
    grid-template-columns: repeat(10, 1fr);
  }
  .csales-property--1 {
    grid-column: 2 / span 4;
    grid-row: 1;
  }

  .csales-property--2 {
    grid-column: 6 / span 4;
    grid-row: 1;
  }

  .csales-property--3 {
    grid-column: 4 / span 4;
    grid-row: 2;
  }
  .offplan-text {
    width: 80%;
  }
}

/* ------------------------ */
/* BELOW 736 px () */
/* ------------------------ */

@media (max-width: 46em) {
  .services-list-item-1 {
    grid-column: 3 / span 2;
    grid-row: 1;
  }

  .services-list-item-2 {
    grid-column: 6 / span 2;
    grid-row: 1;
  }

  .services-list-item-3 {
    grid-column: 9 / span 2;
    grid-row: 1;
  }

  .services-list-item-4 {
    grid-column: 4 / span 2;
    grid-row: 2;
  }

  .services-list-item-5 {
    grid-column: 8 / span 2;
    grid-row: 2;
  }

  .offplan-text {
    width: 90%;
  }

  .grid--offplan-2-col,
  .grid--offplan-2-col-rev {
    padding-right: 2.4rem;
    padding-left: 2.4rem;
  }

  .grid--training {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2.4rem;
  }
  .training-course--1 {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .training-course--2 {
    grid-column: 7 / 13;
    grid-row: 1;
  }
  .training-course--3 {
    grid-column: 1 /7;
    grid-row: 2;
  }
  .training-course--4 {
    grid-column: 7 /13;
    grid-row: 2;
  }
  .grid--rsales {
    grid-template-columns: repeat(12, 1fr);
  }
  .rsales-property--1 {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .rsales-property--2 {
    grid-column: 7 / 13;
    grid-row: 1;
  }

  .rsales-property--3 {
    grid-column: 4 / 10;
    grid-row: 2;
  }

  .grid--csales {
    grid-template-columns: repeat(12, 1fr);
  }
  .csales-property--1 {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .csales-property--2 {
    grid-column: 7 / 13;
    grid-row: 1;
  }

  .csales-property--3 {
    grid-column: 4 / 10;
    grid-row: 2;
  }
}

/* ------------------------ */
/* BELOW 512 px (32em) */
/* ------------------------ */

@media (max-width: 32em) {
  .nav-bar-list {
    grid-template-columns: repeat(3, max-content);
  }
  .hero.grid--2-cols {
    grid-template-columns: 1fr;
  }
  .services-list-item-1 {
    grid-column: 2 / span 2;
    grid-row: 1;
  }

  .services-list-item-2 {
    grid-column: 6 / span 2;
    grid-row: 1;
  }

  .services-list-item-3 {
    grid-column: 10 / span 2;
    grid-row: 1;
  }

  .grid--offplan-2-col {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid--offplan-2-col {
    grid-template-columns: repeat(6, 1fr);
  }

  .offplan-photo {
    width: 100%;
  }

  .offplan-text {
    margin-top: 2.4rem;
  }

  .offplan-property-1 .offplan-photo {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .offplan-property-1 .offplan-text {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .offplan-property-2 .offplan-photo {
    grid-column: 1 / 7;
    grid-row: 3;
  }
  .offplan-property-2 .offplan-text {
    grid-column: 1 / 7;
    grid-row: 4;
    justify-self: center;
  }

  .offplan-property-3 .offplan-photo {
    grid-column: 1 / 7;
    grid-row: 5;
  }
  .offplan-property-3 .offplan-text {
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: center;
  }

  .cfeatures-grid {
    grid-template-columns: 1fr;
  }

  .training-course--1 {
    grid-column: 1 / 13;
    grid-row: 1;
  }
  .training-course--2 {
    grid-column: 1 / 13;
    grid-row: 2;
  }
  .training-course--3 {
    grid-column: 1 /13;
    grid-row: 3;
  }
  .training-course--4 {
    grid-column: 1 /13;
    grid-row: 4;
  }

  .rsales-property--1 {
    grid-column: 1 / 13;
    grid-row: 1;
  }

  .rsales-property--2 {
    grid-column: 1 / 13;
    grid-row: 2;
  }

  .rsales-property--3 {
    grid-column: 1 / 13;
    grid-row: 3;
  }

  .csales-property--1 {
    grid-column: 1 / 13;
    grid-row: 1;
  }

  .csales-property--2 {
    grid-column: 1 / 13;
    grid-row: 2;
  }

  .csales-property--3 {
    grid-column: 1 / 13;
    grid-row: 3;
  }

  .grid--management {
    grid-template-columns: 1fr;
  }
  .management-box::after {
    display: none;
  }
  .grid--footer {
    grid-template-columns: 1fr;
  }
  .logo-col {
    align-items: center;
    justify-items: center;
  }
  .nav-col-list {
    align-items: center;
  }
  .links-col-list {
    align-items: center;
  }
  .logo-col-brand-box {
    text-align: center;
  }
  .logo-col-img-box {
    display: inline-block;
    text-align: center;
  }
  .logo-col-contact-box {
    text-align: center;
  }
  .nav-col,
  .links-col {
    margin-top: 4.8rem;
  }
  .footer-col-name {
    text-align: center;
  }
  .links-col-list {
    text-align: center;
  }
}