/****************************
  Covid Alert Landing Page
****************************/
/* How it works section */
.covid-how-it-works__item {
  margin-bottom: 1.5rem;
}

.covid-how-it-works__image-container {
  width: 13%;
}

.covid-how-it-works__image-container img {
  width: 100%;
}

.covid-how-it-works__text-container {
  width: 87%;
  margin-left: 1.5rem;
}

.covid-app-intro__links {
  margin-top: 2rem;
}

@media screen and (max-width: 62.5em) {
  .covid-how-it-works__image-container {
      width: 15%;
  }

  .covid-how-it-works__text-container {
      width: 85%;
  }
}

@media screen and (max-width: 40em) {
  .covid-how-it-works__image-container {
      width: 22%;
  }

  .covid-how-it-works__text-container {
      width: 78%;
  }
}

@media screen and (max-width: 31.25em) {
  .covid-how-it-works__item {
      display: block;
  }

  .covid-how-it-works__image-container {
      width: 30%;
      margin: 1rem auto 0;
  }

  .covid-how-it-works__text-container {
      width: 100%;
      margin: 0 0 2rem 0;
  }
}

/* Privacy section */
.covid-app__privacy-container {
  padding: 2rem 2rem 0 2rem;
}

.covid-app__privacy-item {
  margin-bottom: 1.5rem;
}

.covid-app__privacy-image-container {
  min-width: 18%;
  align-self: center;
}

.covid-app__privacy-text-container {
  width: 78%;
  padding-left: 1rem;
}

.covid-app__privacy-statement:before {
  content: url('../images/privacy-lock-icon.svg');
  margin-right: .75rem;
  position: relative;
  top: 3px;
}

/* Intro links section */
@media screen and (max-width: 40em) {
  .covid-app-intro__links {
      margin-left: 2rem;
  }

  .covid-app-intro__links a {
      display: block;
      margin-bottom: 1rem;
  }
}

/* App preview links section */
.covid-app-preview__image-container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.covid-app-preview__image-container div {
  width: calc(25% - 1rem);
  margin: 0 0 1rem 0;
}

.covid-app-preview__image-container div img {
  width: 100%;
}

@media screen and (max-width: 73em) {
  .covid-app-preview__image-container {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  }
}

@media screen and (max-width: 31.25em) {
  .covid-app-preview__image-container div {
      width: calc(50% - 1rem);
      margin-right: 1rem;
  }
}



/****************************
  Exposure page
****************************/
.covid-what-to-do__section img {
  width: 6%;
  align-self: flex-start;
  margin-right: 4%;
}

.covid-what-to-do__section > div {
  width: 90%;
  align-self: center;
}

.covid-what-to-do__section--inner {
  padding: 1.5rem;
}

.covid-what-to-do__section--inner .ontario-flex div:first-of-type {
  width: 80%;
  margin-right: 5%;
  align-self: center;
}

.covid-what-to-do__section--inner .ontario-flex div:last-of-type {
  width: 15%;
  align-self: center;
}

.covid-what-to-do__section--inner div img {
  width: 65%;
  -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg)
}

@media screen and (max-width: 73em) {
  .covid-what-to-do__section img {
      width: 8%;
  }

  .covid-what-to-do__section > div {
      width: 88%;
  }
}

@media screen and (max-width: 50em) {
  .covid-what-to-do__section img {
      width: 10%;
      margin-right: 5%;
  }

  .covid-what-to-do__section > div {
      width: 75%;
  }

  .covid-what-to-do__section--inner .ontario-flex div:first-of-type {
      width: 70%;
  }

  .covid-what-to-do__section--inner .ontario-flex div:last-of-type {
      width: 25%;
  }

}

@media screen and (max-width: 40em) {
  .covid-what-to-do__section img {
      width: 12%;
  }

  .covid-what-to-do__section > div {
      width: 73%;
  }

  .covid-what-to-do__section--inner .ontario-flex div:first-of-type {
      width: 100%;
  }
}

@media screen and (max-width: 32em) {
  .covid-what-to-do__section img {
      width: 20%;
      margin-right: 5%;
  }

  .covid-what-to-do__section > div {
      width: 75%;
  }
}

.covid-what-to-do__section .ontario-flex a img {
  width: 100%;
}


/****************************
  Tools page
****************************/
.covid-tools__section {
  margin-bottom: 2.5rem;
}

.covid-tools__section:last-of-type {
  margin-bottom: 3rem;
}

.covid-tools__section-content {
  width: calc(80%);
  margin-left: 2rem;
}

.covid-tools__section-image {
  border: 2px solid white;
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  min-width: 20%;
  padding: 1rem;
  min-height: 185px;
}

.covid-tools__section-image:hover,
.covid-tools__section-image:focus {
  border: 2px solid #1a1a1a;
}

.covid-tools__section-image img {
  display: block;
  max-width: 140px;
}

@media screen and (max-width: 73em) {
  .covid-tools__section-content {
      width: 70%;
  }

  .covid-tools__section-image {
      width: 30%;
  }
}

@media screen and (max-width: 40em) {
  .covid-tools__section-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .covid-tools__section-image {
      display: none;
  }
}

.covid-tools__section-image--mobile {
  border: 2px solid white;
  display: none;
  padding: 1rem;
  margin-right: 1rem;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.covid-tools__section-image--mobile:hover,
.covid-tools__section-image--mobile:focus {
  border: 2px solid #1a1a1a;
}

@media screen and (max-width: 40em) {
  .covid-tools__section-image--mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100px;
    height: 100px;
  }
}

.covid-tools__section-image--mobile > img {
  max-width: 90px;
  height: 90px;
}

.covid-tools__section-image a,
.covid-tools__section-image--mobile a {
  display: block;
}