/* Styling for about.html */
/* Jack Ryan 2021 */

/* Variables */
@import 'variables.css';

/* Hack to preload images */
body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
  content:url("../assets/images/LB_Options_Photo_1_Hero_OrangeLayer.jpg"); 
}

/* Ultra Small */
@media screen and (min-width: 200px) and (max-width: 299px) {
}

/* Mobile */
@media screen and (min-width: 300px) and (max-width: 650px) {
  #hero-image-container {
    display: grid;
    place-items: center;
    height: var(--hero-container-mobile);
    background-image: url("../assets/images/LB_Options_Photo_1_Hero_OrangeLayer.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header h2 {
    color: var(--black);
    text-align: center;
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-mobile);
    padding: 5%;
  }

  .header h3 {
    color: var(--orange);
    text-align: center;
    font-weight: bold;
    font-size: var(--heading-two-mobile);
  }

  .img1-column,
  .img2-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .img1-column h3,
  .img2-column h3 {
    text-align: center;
    font-weight: bold;
    color: var(--orange);
    font-size: var(--heading-two-mobile);
  }

  .img1-column p,
  .img2-column p {
    text-align: center;
    font-weight: bold !important;
    margin: 0px !important;
    color: var(--black) !important;
  }

  .attract-image {
    padding: 5%;
    max-width: 100%;
    margin: auto;
  }

  .location-container h3 {
    font-weight: bold;
    color: var(--orange);
    text-align: center;
  }

  .location-container p {
    color: var(--black) !important;
    font-size: var(--para-mobile) !important;
  }


  .location-container .image {
    padding: 2.5%;
    margin: 20px 0px;
  }

  .location-container img {
    border-radius: 8px;
    border: solid 2px var(--cyan);
  }

  /* Management and Services */

  .management-container {
    background-color: var(--light);
    padding-bottom: 20px;
  }

  .management-container h2 {
    color: var(--black);
    font-size: var(--heading-two-mobile);
    text-align: center;
    padding-top: 20px !important;
  }

  .col-1 p {
    color: var(--blue) !important;
    font-weight: bold;
    margin: 0px !important;
  }

  .col-1 {
    margin-bottom: 5%;
  }

  .col-2 p {
    color: var(--black);
  }

  .col-2 p:not(.large) {
    margin-top: 0px !important;
  }

  p.large {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--blue) !important;
    margin-bottom: 0px !important;
  }
}

/* Tablet */
@media screen and (min-device-width: 651px) {
  #hero-image-container {
    display: grid;
    place-items: center;
    height: var(--hero-container-tablet);
    background-image: url("../assets/images/LB_Options_Photo_1_Hero_OrangeLayer.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header h2 {
    color: var(--black);
    text-align: center;
    grid-row: 1/1;
    grid-column: 1;
    font-weight: bold;
    font-size: var(--heading-two-tablet);
  }
  .header h3 {
    color: var(--orange);
    text-align: center;
    margin: 0px !important;
    padding: 0% 5%;
    font-weight: bold;
    font-size: var(--heading-two-tablet);
  }

  .image-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .img1-column {
    grid-column: 1/1;
  }

  .img2-column {
    grid-column: 2/2;
  }

  .img1-column,
  .img2-column {
    grid-row: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .img1-column h3,
  .img2-column h3 {
    text-align: center;
    font-weight: bold;
    color: var(--orange);
    font-size: var(--heading-two-tablet);
  }

  .img1-column p,
  .img2-column p {
    text-align: center;
    font-weight: bold !important;
    margin: 0px !important;
    color: var(--black) !important;
  }

  .attract-image {
    padding: 5%;
    max-width: 100%;
    margin: auto;
  }

  .location-container {
    display: grid;
    grid-template-rows: 0.5fr 0.5fr;
    grid-template-columns: 1fr 1fr;
  }

  .location-container h3 {
    font-weight: bold;
    color: var(--orange);
    text-align: center;
  }

  .location-container p {
    color: var(--black);
  }

  .location-container img {
    border-radius: 8px;
    border: solid 2px var(--cyan);
  }

  .location-container .image {
    padding: 2.5%;
    margin: 20px 0px;
  }

  .first-three,
  .second-three {
    display: grid;
    grid-template-rows: 0.25fr 1fr 0.25fr;
    grid-template-columns: 1fr;
  }

  #text-grp-1,
  #text-grp-2,
  #text-grp-3,
  #text-grp-4,
  #text-grp-5,
  #text-grp-6 {
    grid-column: 1/1;
  }

  #text-grp-1,
  #text-grp-4 {
    grid-row: 1/1;
  }

  #text-grp-2,
  #text-grp-5 {
    grid-row: 2/2;
  }

  #text-grp-3,
  #text-grp-4 {
    grid-row: 3/3;
  }

  .image {
    grid-column: 1/-1;
    grid-row: 2/2;
    display: grid;
    place-items: center;
  }

  .image img {
    max-width: 75%;
  }

  /* Management and Services */
  .management-container {
    background-color: var(--light);
    padding-bottom: 20px !important;
  }

  .management-container h2 {
    color: var(--black);
    font-size: var(--heading-two-tablet);
    text-align: center;
    padding-top: 20px !important;
  }

  .col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .col-1 {
    grid-column: 1/1;
    grid-row: 1/1;
  }

  .col-1 p {
    color: var(--blue) !important;
    font-weight: bold;
    margin: 0px !important;
    font-size: var(--heading-three-tablet);
    padding-left: 5% !important;
  }

  .col-2 {
    grid-column: 2/2;
    grid-row: 1/1;
  }

  .col-2 p {
    color: var(--black);
    margin: 0px !important;
  }

  p.large {
    font-size: var(--heading-three-tablet);
    font-weight: bold;
    color: var(--blue) !important;
  }

  p:nth-child(3) {
    margin-top: 5% !important;
  }
}

/* Desktop */
@media screen and (min-device-width: 1025px) {
  #hero-image-container {
    height: var(--hero-container-desktop);
  }

  .header h2 {
    font-size: var(--heading-two-desktop);
  }
  .header h3 {
    font-size: var(--heading-two-tablet);
  }

  .img1-column h3,
  .img2-column h3 {
    font-size: var(--heading-three-desktop);
  }

  .attract-image {
    max-width: 75% !important;
  }

  .management-container h2 {
    font-size: var(--heading-two-desktop);
  }

  .col-1 p {
    font-size: var(--heading-three-desktop);
  }

  p.large {
    font-size: var(--heading-three-desktop);
  }

  .first-three,
  .second-three {
    display: grid;
    grid-template-rows: 0.25fr 1fr 1fr;
    grid-template-columns: 1fr;
  }
}