App.css

}
html[dir=rtl] .hint-container.info .hint-container-title:before,
html[dir=rtl] .hint-container.note .hint-container-title:before,
html[dir=rtl] .hint-container.tip .hint-container-title:before,
html[dir=rtl] .hint-container.warning .hint-container-title:before,
html[dir=rtl] .hint-container.danger .hint-container-title:before {
  right:0;
  left:unset
}
.hint-container.info p,
.hint-container.note p,
.hint-container.tip p,
.hint-container.warning p,
.hint-container.danger p {
  line-height:1.5
}
.hint-container.info a,
.hint-container.note a,
.hint-container.tip a,
.hint-container.warning a,
.hint-container.danger a {
  color:var(--vp-tc)
}
.hint-container.info {
  border-color:var(--info-border-color);
  background:var(--info-bg-color)
}
.hint-container.info>.hint-container-title {
  color:var(--info-title-color)
}
.hint-container.info>.hint-container-title:before {
  background-image:url("https://static.igem.wiki/teams/5247/design/icons/info-filled-small.png")
}
.hint-container.info code {
  background:var(--info-code-bg-color)
}


/*POPUP*/
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  min-width: 50vw;
  min-height: 20vw;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  z-index: 1;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.tl-butt img:hover{
  cursor: pointer;
  box-shadow: 3px 3px 10px black;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
}


/*GALLERY*/
.gall {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  display: grid;
  margin: calc(var(--s) + var(--g));
}

.gall > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
  transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
  cursor: pointer;
  filter: grayscale(80%);
  transition: .2s linear;
}
.gall > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: 1.2;
}

.gall > img:nth-child(1) {--_y: calc(-100% - var(--g))}
.gall > img:nth-child(7) {--_y: calc( 100% + var(--g))}
.gall > img:nth-child(3), .gall > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
.gall > img:nth-child(4), .gall > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
.gall > img:nth-child(3),.gall > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
.gall > img:nth-child(5), .gall > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}



.wrapper{
	width: 500px;
	height: 100%;
	background: #fff;
	margin: 15px auto 0;
}
.wrapper .tabs_wrap{
	padding: 20px;
	border-bottom: 1px solid #ebedec;
}
.wrapper .tabs_wrap ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.wrapper .tabs_wrap ul li{
  list-style-type: none;
	width: 135px;
    text-align: center;
    background: #e9ecf1;
    border-right: 1px solid #c1c4c9;
    padding: 13px 15px;
	cursor: pointer;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.wrapper .tabs_wrap ul li:first-child{
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
}

.wrapper .tabs_wrap ul li:last-child{
	border-right: 0px;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
}

.wrapper .tabs_wrap ul li:hover,
.wrapper .tabs_wrap ul li.active{
	background: #7fc469;
	color: #fff;
}


.gall-a {
  --s: 200px; /* control the size */
  --g: 8px;   /* control the gap */
  
  display: grid;
  grid: auto-flow var(--s)/repeat(2,var(--s));
  gap: var(--g);
}
.gall-a > span {
  width: 100%; 
  aspect-ratio: 1;
  z-index: 0;
  position: relative;
  transition: .25s,z-index 0s .25s;
  background-color: lightgray;
}
.gall-b:hover{
  background-color: var(--ourbeige);
}
.bg-act{
  background-color: var(--background)!important;
}
.gall-a > span > div > img{
  width: 8rem; 
  position: absolute; 
  cursor: pointer;
}

.gall-a > span:nth-child(1) > div > img{
  bottom: 0.5rem;
  right: 1rem; 
}
.gall-a > span:nth-child(2) > div > img{
  bottom: 0.5rem;
  left  : 1rem;
}
.gall-a > span:nth-child(3) >  div > img{
  top: 0.5rem;
  right: 1rem;
}
.gall-a > span:nth-child(4) > div > img{
  top: 0.5rem;
  left: 1rem;
}

.gall-a > span:nth-child(1){
  clip-path: circle(var(--_c,70% at 70% 70%));
  place-self: start;
}
.gall-a > span:nth-child(2){
  clip-path: circle(var(--_c,70% at 30% 70%));
  place-self: start end;
}
.gall-a > span:nth-child(3){
  clip-path: circle(var(--_c,70% at 70% 30%));
  place-self: end start;
}
.gall-a > span:nth-child(4){
  clip-path: circle(var(--_c,70% at 30% 30%));
  place-self: end;
}

.buffer{
  height: 5vw;
}

.explore{
  position: absolute;
  right: -4vw;
  bottom: 8vw;
  z-index: 1;
  transform: rotate(-35deg);
  font-size: xx-large;
}

.team-container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

/* TEAM */
.lnp{
  background-image: url("https://static.igem.wiki/teams/5247/scientific-figures/lnp.png");
  height: 12rem;
  width: 12rem;
  background-size: 12rem;
  background-repeat: no-repeat;
  align-items: center;
}
.lnp > img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 16rem !important;
  max-width: 100% !important;
  transition: all 1s ease;
  border: 5px solid var(--text-primary);
}
.lnp > img:hover{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 66% !important;
  max-width: 66% !important;
  
}