:root {
  --color: black;
  --itemsPerRow: 2;
}

.nav-menu {
  padding-bottom: 0;
}

.grid-container {
  grid-template-columns: repeat(var(--itemsPerRow), minmax(0, 1fr));
}

.ant-columns {
  grid-template-columns: 1fr var(--gridColumnGap) 1fr;
}

.hero {
  padding: calc((var(--gridColumnGap) - var(--antFontSize))/2) 0; /*To make this even with the margins on the side ant columns, have to subtract ant-row height from ant-column width and divide by 2 */
  /* background:grey; */
}

/* The purpose of this wrapper is so that when the iframe exceeds the dimensions of .hero (calculated dynamically in main.js), its overflow is hidden, so as to achieve the effect of iframe fit to cover on .hero, not fit to contain. The .iframe-wrapper hides the iframe including .hero's padding */
.hero .iframe-wrapper {
  width:100%;
  height:100%;
  position: relative;
  overflow: hidden;
  /* background:blue; */
}

.hero iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-caption {
  padding-top: .5em;
}

/* Alternating word color stylings */
.grid-container .word:nth-child(even), .blue-green .word:nth-child(even) {
  color: var(--blue);
}

.grid-container .word:nth-child(odd), .blue-green .word:nth-child(odd){
  color: var(--green);
}

.animated-svg-comma {
  stroke:black;
}


/* Special underline color-coding for Home index */
[data-underline-fixed='underline-black'], [data-underline-hover='underline-black']:hover {
  background-image: 
    -webkit-linear-gradient(right, transparent 50%, black 50%), 
    -webkit-linear-gradient(right, transparent 50%, black 50%), 
    -webkit-linear-gradient(top, transparent 50%, black 50%), 
    -webkit-linear-gradient(top, transparent 50%, black 50%);
  
}

[data-underline-fixed='underline-blue'], [data-underline-hover='underline-blue']:hover {
  background-image: 
    -webkit-linear-gradient(right, transparent 50%, var(--blue) 50%), 
    -webkit-linear-gradient(right, transparent 50%, var(--blue) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--blue) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--blue) 50%);
}

[data-underline-fixed='underline-green'], [data-underline-hover='underline-green']:hover {
  background-image: 
    -webkit-linear-gradient(right, transparent 50%, var(--green) 50%), 
    -webkit-linear-gradient(right, transparent 50%, var(--green) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--green) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--green) 50%);
}

/* MARCHING IMAGE BORDERS */
.img-project {
  background: linear-gradient(transparent, transparent) content-box,
    repeating-linear-gradient(-45deg, var(--blue) 0, var(--blue) 25%, transparent 0, transparent 50%) 0 / .6em .6em;
}

.img-news {
  background: linear-gradient(transparent, transparent) content-box,
    repeating-linear-gradient(-45deg, var(--green) 0, var(--green) 25%, transparent 0, transparent 50%) 0 / .6em .6em;
}

.img-about {
  background: linear-gradient(transparent, transparent) content-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
  .pages {
    flex-flow: column wrap;
    justify-content: flex-start;
    gap: 0;
  }
}

@media screen and (max-width: 480px) {
  .hero {
    padding: calc(-1 * var(--antFontSize)) 0; /*Top padding is negative so there's no gap between hero and ant-row*/
  }
/* 
  .video-caption {
    padding-left: var(--largeMargin);
    padding-right: var(--largeMargin);
    padding-bottom: var(--smallMargin);
  } */
}