@font-face {
  font-family: myriadpro-bold;
  src: url("../fonts/myriad-pro-cufonfonts/MYRIADPRO-BOLD.OTF")
    format("opentype");
}

@font-face {
  font-family: myriadpro-regular;
  src: url("../fonts/myriad-pro-cufonfonts/MYRIADPRO-REGULAR.OTF")
    format("opentype");
}


.single-post .main-banner {
  max-height: 650px;
  min-height: 30vh;
  background-color: #1A99D4;
  display: flex;
  align-items: center;
}

.single-post .main-banner h1 {
  color: white;
  font-family: "myriadpro-bold", Fallback, sans-serif;
  font-size: 4vw;
  margin-left: 10%;
}

.single-post .single-post__content{
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 45% 45%;
  grid-column-gap: 10%;
  font-family: "myriadpro-regular", Fallback, sans-serif;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5vh;
}

.single-post .single-post__content .single-post__content__text {
  margin-top: 5vh;
}


.single-post .single-post__content .single-post__content__image img {
  border-radius: 25px;
}

@media (max-width: 620px) {
  .single-post .single-post__content{
    display: grid;
    grid-template-columns: 1fr;
  }
  .single-post .single-post__content div:first-child {
    order: 1;
  }

  .single-post .main-banner {
    max-height: 300px;
    min-height: 15vh;
  }
}

@media (min-width: 620px) and (max-width: 1080px) {

  .single-post .main-banner {
    max-height: 300px;
    min-height: 20vh;
  }
}