/* general elements */

.grd-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  justify-content: center;
  align-items: stretch;
  column-gap: 4rem;
  }

.grd-item {
  display: flex;
  flex-direction: column; 
  height: calc( 450px * .8 );
  width: 450px;
  margin-top: 2rem;
  margin-bottom: 1rem;

 }

.grd-item a {
  height: 100%;
  width: 100%;
  text-decoration: none;
  position: relative;
  color: black;
 }

.grd-item a:visited {
  color: black;
}

.grd-item img {
  height: 100%;
  width: 100%;
  max-height: calc( 100% - 2rem );
  object-fit: cover;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 0.2);
  transition: all 0.5s ease;
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  
}
.grd-item a::before {
  content: "\2192";
  font-family: SourceSansPro-Bold;
  color: #0189DD;
  font-size: 1.5rem;
  padding: 0rem .6rem .15rem .6rem;
  line-height: 2rem;
  border-radius: 50%;
  border: #0189DD .1rem solid;
  background-color: #F4F4F4;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-1.5rem, -3.5rem);
  opacity: 0;
 
}
.grd-item a:hover::before{
  display: block;
  z-index: 99;
  transition: opacity 1s ease;
  opacity: 1;
  pointer-events: none;
}

.grd-item img:hover {
  transform: scale(1.025);
}

.grd-project-title {
  margin-top: .5rem;
  margin-left: .5rem;
  font-size: 1.05rem; 
  line-height: 1rem;
  width: 100%;
  text-align: left;
  transition: all 0.5s ease;
}

.grd-project-title:hover {
    color: #0189DD;
}



/* project specific */

.grd-project-container {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: auto;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
}

.grd-project-cover-gallery {
  width: 90%;
  
  
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 0.2);
  border-radius: .5rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.grd-project-cover-img {
  width: 90%;
  height: 0;
  padding-top: 60%;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 0.2);
  border-radius: .5rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

#bwn-i-cover {
  background: url(../img/Graphic_design_landing_image.png);
  background-size: 102%;
  background-position: 90% 30%;
}

#bwnb-b-cover {
  background: url(../img/bwnb/BwnB-book-print.png);
  background-size: 100%;
  background-position: 0% 40%;
}

#en-i-cover {
  background: url(../img/ia-en/animation-ia-en.gif);
  background-size: 120%;
  background-position: 50% 50%;
}

#all-risk-b-cover {
  background: url(../img/all-risk/all-risk-book-front.png);
  background-size: 100%;
  background-position: 0% 60%;
}

#rvr-i-cover {
  background: url(../img/rvr/Sample-rvr.png);
  background-size: 100%;
  background-position: 0% 60%;
}

#bridge-cover {
  background: url(../img/bridge/bridge-render.png);
  background-size: 145%;
  background-position: 40% 100%;
}

#orbe-cover {
  background: url(../img/orbe/Orbe-Render.png);
  background-size: 101%;
  background-position: 50% 50%;
}

#petals-cover {
  background: url(../img/petals/Petals-of-Ethiopia.jpg);
  background-size: 101%;
  background-position: 90% 50%;
}

.grd-project-gallery {
  margin: 1.75rem 0 3.25rem 0;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: .5rem;
  background-color: white;  
}


.ar1-2 {
  padding-bottom: 50%;
}

.ar3-4 {
  padding-bottom: 75%;
}
.ar6-9 {
  padding-bottom: 60%;
}
.ar14-10 {
  padding-bottom: 142%;
}

.book-page-img img {
  transform: translateY(-10%);
}

.icon-path-img img {
  padding: 0 5%;
  transform: translateY(20%);
}

.design-principles-img img {
  padding: 15%;
  transform: translateY(-12.5%);
}

.grd-project-gallery .flickity-viewport {
  position: absolute;
  width: 100%;

}

.grd-project-gallery-cell {
  width: 100%;
  height: 100%;
  
  border-radius: .5rem;
  overflow: hidden;
}
.ia-en {
  width: 120%;
  border-radius: .5rem;
 }


.grd-project-gallery-cell img {
  border-radius: .5rem;
  background-color: white;
  width: 100%;
 }

.grd-project-gallery.is-fullscreen {
  margin: 0;

}

.grd-project-gallery.is-fullscreen .grd-project-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(0%);
}

.grd-project-gallery.is-fullscreen .design-principles-img img {
  padding: 0%;
}

.grd-project-gallery.is-fullscreen .rvr-fs img {
  object-fit: cover;
}

video, .scale-hover-image {
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 0.2);
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
  margin: 1.75rem 0 1.75rem 0;
  position: relative;
}

video:hover,  .scale-hover-image:hover {
 transform: scale(1.025);
}

.visual-enlarge {
  position: relative;
}
 
.visual-enlarge::before {
  content: url(../img/icons/open-in-new-tab-blue.svg);
  font-family: SourceSansPro-Bold;
  width: 1rem;
  height: 1rem;
  padding: .6rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #f4f4f4;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-1.5rem, -1.5rem);
  
  opacity: 0;
}

.visual-enlarge:hover::before {
  content: url(../img/icons/open-in-new-tab-white.svg);
  display: block;
  z-index: 99;
  background-color: #0189DD;
  border: #0189DD 1px solid;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s;
}

.vis-en-alt-pos::before {
  transform: translate(-1.5rem, -3.25rem);
}


/* end of new iteration */


@media screen and (max-width: 1024px) {
 
.grd-item a::before, .visual-enlarge::before {
  display: block;
  z-index: 99;
  opacity: 1;
}


}

@media screen and (max-width: 600px) {

.grd-item {
  display: flex;
  flex-direction: column; 
  height: calc(100vw * .75);
  width: 100vw;
  margin-top: 2rem;
  margin-bottom: 1rem;
 }

.grd-project-cover-img {
  width: 100%;
}

.grd-item img:hover {
  transform: none;
}

video:hover, .scale-hover-image:hover {
 transform: none;
}