/* 
    SET YOUR STYLES IN THIS FILE
    For help, see the style.css documentation: https://www.notion.so/style-css-cac459cc9c384da08f561394bcee4cbf
*/

/* FONTS */
/* add any @import statements for novelty fonts you want to use here ↓ */

/* COLORS */
:root {
  /* --mycolor: #your color here; */
  --idsred: #990000;
  --darkgray: rgb(80, 80, 80);
  --caption-width: 38rem;
  --image-radius: 12px;
  --image-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

header {
  /* add header image below */
  /* can use a file path before the photo is uploaded to ceo */
  background-image: linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.18)), url('https://s3.amazonaws.com/snwceomedia/ids/b8db4fef-f1b9-4033-ae9c-dc7c01f3f510.original.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* adjusts image placement, can also be set as percentages (ex. 50% 50%) */
  background-position: center 32%;
}

/* 
  SET ANY MORE STYLES YOU WANT BELOW
  Be sure to delete empty declarations
*/

/* 
TYPOGRAPHY
*/
h1,
h2 {
  /* alignment */
  text-align: center;
  /* width of text */
  max-width: var(--width-lg);
  /* text color */
  color: white;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

.headline-container {
  left: 0;
  right: 0;
  width: min(calc(100% - 2rem), 44rem);
  margin: 0 auto;
}

/* .header-caption { */
/*   max-width: 38rem; */
/*   margin: var(--md) auto 0; */
/* } */

.bylines {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.imagegrid {
  max-width: min(76rem, var(--width-xl));
  column-gap: clamp(16px, 1.5vw, 24px);
  row-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}

.imagegrid figure {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.imagegrid img {
  border-radius: var(--image-radius);
  box-shadow: var(--image-shadow);
  background-color: #e8ddd0;
}

.imagegrid figcaption {
  max-width: var(--caption-width);
  font-size: 15px;
  margin-top: 0;
  padding-top: 0;
  color: #5d5d5d;
  line-height: 1.45;
  text-align: left;
}

.grid-image-1 figcaption,
.grid-image-14 figcaption {
  margin-left: auto;
  margin-right: auto;
}

.grid-image-1 img,
.grid-image-2 img,
.grid-image-11 img,
.grid-image-14 img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.grid-image-3 img,
.grid-image-4 img,
.grid-image-5 img,
.grid-image-6 img,
.grid-image-7 img,
.grid-image-8 img,
.grid-image-9 img,
.grid-image-10 img,
.grid-image-12 img,
.grid-image-13 img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.essay-text {
  grid-column: 2/12;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.25rem 0;
}

.essay-text p {
  margin: 0 0 1rem;
  color: #1f1f1f;
  line-height: 1.7;
}

.essay-text p:last-child {
  margin-bottom: 0;
}

.grid-image-1 {
  grid-area: 1/2/2/12;
}

.grid-image-2 {
  grid-area: 2/3/3/11;
  align-self: start;
}

.essay-text-1 {
  grid-row: 3/4;
}

.grid-image-3 {
  grid-area: 4/2/5/7;
}

.grid-image-4 {
  grid-area: 4/7/5/12;
}

.essay-text-2 {
  grid-row: 5/6;
}

.grid-image-5 {
  grid-area: 6/2/7/7;
}

.grid-image-6 {
  grid-area: 6/7/7/12;
}

.essay-text-3 {
  grid-row: 7/8;
}

.grid-image-7 {
  grid-area: 8/2/9/7;
}

.grid-image-8 {
  grid-area: 8/7/9/12;
}

.essay-text-4 {
  grid-row: 9/10;
}

.grid-image-9 {
  grid-area: 10/2/11/7;
}

.grid-image-10 {
  grid-area: 10/7/11/12;
}

.grid-image-11 {
  grid-area: 11/3/12/11;
}

.essay-text-5 {
  grid-row: 12/13;
}

.grid-image-12 {
  grid-area: 13/2/14/7;
}

.grid-image-13 {
  grid-area: 13/7/14/12;
}

.grid-image-14 {
  grid-area: 14/2/15/12;
}

.essay-text-6 {
  grid-row: 15/16;
}

@media screen and (max-width: 992px) {
  .imagegrid {
    row-gap: var(--md);
  }

  .imagegrid figure {
    grid-column: 1/13;
    margin-bottom: 0;
  }

  .imagegrid img {
    aspect-ratio: auto;
  }

  .essay-text {
    grid-column: 2/12;
    padding: 0;
  }

  .grid-image-1 {
    grid-row: 1/2;
  }

  .grid-image-2 {
    grid-row: 2/3;
  }

  .essay-text-1 {
    grid-row: 3/4;
  }

  .grid-image-3 {
    grid-row: 4/5;
  }

  .grid-image-4 {
    grid-row: 5/6;
  }

  .essay-text-2 {
    grid-row: 6/7;
  }

  .grid-image-5 {
    grid-row: 7/8;
  }

  .grid-image-6 {
    grid-row: 8/9;
  }

  .essay-text-3 {
    grid-row: 9/10;
  }

  .grid-image-7 {
    grid-row: 10/11;
  }

  .grid-image-8 {
    grid-row: 11/12;
  }

  .essay-text-4 {
    grid-row: 12/13;
  }

  .grid-image-9 {
    grid-row: 13/14;
  }

  .grid-image-10 {
    grid-row: 14/15;
  }

  .grid-image-11 {
    grid-row: 15/16;
  }

  .essay-text-5 {
    grid-row: 16/17;
  }

  .grid-image-12 {
    grid-row: 17/18;
  }

  .grid-image-13 {
    grid-row: 18/19;
  }

  .grid-image-14 {
    grid-row: 19/20;
  }

  .essay-text-6 {
    grid-row: 20/21;
  }
}

@media screen and (max-width: 768px) {
  .headline-container {
    width: calc(100% - 2rem);
    top: 50%;
    transform: translateY(-50%);
  }

  .header-caption {
    margin-top: var(--sm);
  }

  .imagegrid {
    row-gap: var(--md);
  }

  .imagegrid figure,
  .essay-text {
    grid-column: 1/13;
    margin-bottom: 0;
  }

  .imagegrid img {
    aspect-ratio: auto;
  }

  .imagegrid figcaption {
    max-width: none;
  }

  .essay-text {
    padding: 0;
  }
}




/* 
media queries helper
*/
.helper {
  /* comment out next line to get visual help with media queries while you code */
  display: none !important;

  width: 60px;
  height: 60px;
  background-color: red;
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.helper::after {
  content: 'XS';
  color: white;
  font-family: Lato, sans-serif;
  font-weight: bold;
  font-size: 25px;
}

/* MEDIA QUERIES FROM SMALLEST TO LARGEST = MOBILE FIRST */
/* use these for responsive design — you can set different styles based on how wide the screen is */
/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .helper {
    background-color: orange;
  }

  .helper::after {
    content: 'S';
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  header {
    /* adjust header image positioning for larger devices if needed */
    /* you can also change the header image for mobile here */
    background-position: center 35%;
  }

  .helper {
    background-color: yellow;
  }

  .helper::after {
    content: 'M';
    color: black;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .helper {
    background-color: green;
  }

  .helper::after {
    content: 'L';
    color: white;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .helper {
    background-color: blue;
  }

  .helper::after {
    content: 'XL';
  }
}