span {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 1vw;
  font-family: Arial;
}


.sessao8{
  width: 100%;
  background-color:#0A131D;
}

.container{
  margin: 0 auto;
  width: 70%;
  padding: 30px;
}

.container .campus{
  width: 50%;
  max-width: 350px;
  margin: 0 auto;
  padding: 30px;
}



.sessao8 img {
  max-width: 100%;
  display: block;
}

/* SECTION GRID 3 */

.grid3 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  margin: 0 auto;
  max-width: 800px;
  padding: 10px;
  
}

.grid3-item:nth-child(1) {
  grid-column: 1 / 8;
}

.grid3-item:nth-child(2) {
  grid-row: 2;
  grid-column: 1/5;
}

.grid3-item:nth-child(7) {
  grid-row: 2 / 4;
  grid-column: 5/8;
  
}
.grid3-item:nth-child(3) {
  grid-row: 3;
  grid-column: 1/5;
}
.grid3-item:nth-child(6) {
  grid-row: 5;
  grid-column: 1/4;
}
.grid3-item:nth-child(4) {
  grid-row: 5;
  grid-column: 4/8;
}

.grid3-item:nth-child(8) {
  grid-row: 6;
  grid-column: 1/5;
}
.grid3-item:nth-child(5) {
  grid-row: 6;
  grid-column: 5/8;
}
.grid3-item:nth-child(9) {
  grid-row: 4;
  grid-column: 1/8;
}



.grid3-item {
  display: grid;
  overflow: hidden;
}

.grid3-item img {
  grid-column: 1;
  grid-row: 1/3;
  align-self: end;
  align-self: end;
  cursor: pointer;
  transition: all linear 0.4s;
}
.grid3-item img:hover {
  transform: scale(1.1);
}

.grid3-item span {
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 8px;
  color: white;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

#modal_img{
  transform: scale(0);
  transition: all linear .3s;
}


.modal_active #modal_img{
  transform: scale(0.8);
}
#modal{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  visibility: hidden;
  z-index: 1;
  opacity: 0;
  transition: visibility 0.8s linear, opacity 0.5s linear;
}

.modal_content{
  display: flex;
  justify-content: center;
}




.bt_close{
  display: flex;
  top: 10px;
  right: 10px;
  color:#fff;
  background-color: #000;
  position: absolute;
  padding: 3px 13px;
  font-size: 1.8vw;
  border:solid 1px #fff;
  transition: all ease-out .4s;
  cursor: pointer;
}
.bt_close:hover{
  background-color: #f00;
}

.modal_active{
  visibility: visible;
  opacity: 1;

}


@media screen and (max-width: 599px){
  .container{
    width: 100%;
    padding: 0;
  }

  span{
    font-size: 2.3vw;
  }
}

@media screen and (min-width: 600px) and (max-width: 900px){
  span{
    font-size: 1.5vw;
  }
}

@media screen and (min-width: 901px) and (max-width: 1400px){
  span{
    font-size: 1vw;
  }
}