:root {
  --w-borders: 2px solid #20364a;
  --w-section-bg: transparent;
  --col-padding: 3rem 2rem;
}




.grid,
.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.section-grid {
  gap: 2rem;
  padding: 2rem;
  margin: 2rem 0;

  background: var(--color-primary);
  border-radius: 1rem;
}



.column {
  grid-column: span var(--span);
  min-width: 0;
  padding: 3rem;
}

.grid > .column {
  grid-column: span var(--columns);
}




.page-home .section-grid:first-of-type {
  padding: 0;
  background: transparent;
}

.page-home .section-grid:first-of-type .column {
  padding: 0;
  background: transparent;
}

.page-home .section-grid:first-of-type img {
  border-radius: 1rem;
}

.page-home .section-grid:first-of-type figure img {
  object-fit: fill;
}

.page-home .section-grid:last-of-type {
  background: var(--color-secondary);
  color: var(--dark-pink);
}

.page-about .section-grid:nth-last-child(2) {
  background: var(--color-secondary);
  color: var(--dark-pink);
}


.column:has(figure[data-ratio="3/2"]) {
  padding: 0;
}




.blocks,
.richtext-wrapper,
.richtext,
figure {
  min-width: 0;
  max-width: 100%;
}

.blocks img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ratio);
}

figure {
  width: 100%;
  margin: 0;
}


figure[data-ratio="1/1"]  { --ratio: 1 / 1; }
figure[data-ratio="16/9"] { --ratio: 16 / 9; }
figure[data-ratio="10/8"] { --ratio: 10 / 8; }
figure[data-ratio="21/9"] { --ratio: 21 / 9; }
figure[data-ratio="7/5"]  { --ratio: 7 / 5; }
figure[data-ratio="4/3"]  { --ratio: 4 / 3; }
figure[data-ratio="5/3"]  { --ratio: 5 / 3; }
figure[data-ratio="3/2"]  { --ratio: 3 / 2; }
figure[data-ratio="3/1"]  { --ratio: 3 / 1; }
figure[data-ratio="auto"] { --ratio: auto; }

figure[data-ratio] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

figure[data-crop] {
  overflow: hidden;
}

figure[data-crop] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .2rem;
}


.blocks figure > iframe,
.blocks figure > video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}




blockquote {
  font-style: italic;
  font-size: smaller;
}

blockquote footer {
  font-size: small;
  color: grey;
}



.blocks figure > ul {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);

  gap: 1rem;

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;

  aspect-ratio: 3 / 2;
}

.blocks figure > ul > li {
  min-width: 0;
  overflow: hidden;
}

/* top left */
.blocks figure > ul > li:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

/* top right */
.blocks figure > ul > li:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1;
}

/* bottom left */
.blocks figure > ul > li:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 2;
}

/* bottom right */
.blocks figure > ul > li:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.blocks figure > ul > li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .2rem;
}



.blocks figure > figcaption {
  width: 100%;
  max-width: none;
  text-align: center !important;
}



.richtext {
  overflow-wrap: break-word;
}

.richtext a {
  overflow-wrap: anywhere;
}




@media (max-width: 900px) {

  .column {
    padding: 2rem;
  }

  .section-grid {
    gap: 1.5rem;
    padding: 1.5rem;
  }
}




@media (max-width: 700px) {



  .grid,
  .section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid
   {
    margin: 0;
  }
  .section-grid > .column .blocks {
  gap: .5rem;
}


  .column,
  .grid > .column,
  .section-grid > .column {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }



  .grid > .column {
    padding: 0;
  }


  .section-grid {
    gap: 2rem;
    padding: 2rem 1.25rem;
    margin: 1.5rem 0;
  }

  .section-grid > .column {
    padding: 0;
    margin: 0 0 1rem;
  }
 .section-grid > .column h2, .section-grid > .column h3{
    text-align: center;
    line-height: 1.1;
  }



  .blocks figure > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);

    gap: 0.5rem;

    aspect-ratio: auto;
  }




  .blocks figure > ul > li:nth-child(1),
  .blocks figure > ul > li:nth-child(2),
  .blocks figure > ul > li:nth-child(3),
  .blocks figure > ul > li:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }


  .blocks figure > ul > li {
    aspect-ratio: 1 / 1;
  }

  .blocks figure > ul > li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }




  .text-align-justify {
    text-align: left;
  }



  .richtext,
  .richtext p,
  .richtext a,
  .richtext strong {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}