/* Fonts */
@font-face {
  font-family: "Maison Neue";
  font-weight: normal;
  src: url("/themes/custom/sethhill/dist/fonts/MaisonNeueWEB-Book.woff") format("woff");
}

@font-face {
  font-family: "Maison Neue";
  font-weight: bold;
  src: url("/themes/custom/sethhill/dist/fonts/MaisonNeueWEB-Bold.woff") format("woff");
}

/* Variables */
:root {
  --color--gray--dark: #41403f;
  --color--gray: #626262;
  --color--gray--medium: var(--color--gray--dark);
  --color--gray--light: #e0e0e0;
  --color--gray--very-light: #f1efed;
  --color--rich-red: #d2232a;
  --color--dark-purple: #241429;
  --color--bright-blue: #31508c;
  --color--brighter-blue: #7ED8FC;
  --color--blue: #18385c;
  --color--white: #ffffff;
  --color--orange: #dd6f20;
  --color--black: var(--color--gray--dark);
  --color--primary: var(--color--white);
  --color--secondary: var(--color--bright-blue);

  --color--blue--dark: rgb(20, 20, 41);
  --color--green: rgb(4, 195, 108);
  --color--red: #ef003e;

  --font-size--small: 0.8125rem;
  --font-size--normal: 1rem;
  --font-size--list-title: 1.125rem;

  --font-display: "Maison Neue", Helvetica;
  --font-text: "Maison Neue", Helvetica;

  --grid-space--vertical: 1rem;
  --grid-space--horizontal: 2rem;
}

html {
  font-size: 16px;
}

body {
  background-color: var(--color--blue--dark);
  color: var(--color--white);
  font-family: var(--font-text), sans-serif;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 2rem 1.5rem 1.5rem;

  @media (min-width: 600px) {
    padding: 1.25rem 3rem 3rem;
  }

  @media (min-width: 1025px) {
    padding: 1.25rem 4rem 4rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
ul,
ol,
dl,
dd,
hr,
pre,
table,
fieldset,
figure {
  margin-top: unset;
}

.dialog-off-canvas-main-canvas {
  /* background-color: var(--color--white);
  color: var(--color--black); */
}

pre {
  line-height: 1.1;
  tab-size: 2;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

p code {
  color: rgba(255, 255, 255, 0.75);
  color: var(--color--red);
  font-size: 16px;
  hyphens: none;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

h1 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  margin-top: 3rem;
}

blockquote {
  font-family: var(--font-display), serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 3rem 0;
  max-width: 36ch;
  padding: 0;

  @media (min-width: 1025px) {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  a {
    &:hover {
      text-decoration: underline;
      text-decoration-color: var(--color--red);
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }

    &:focus {
      text-decoration: none;
      outline: 2px solid #00cc6d;
      outline-offset: 4px;
    }
  }
}

blockquote + blockquote {
  margin-top: -1rem;
}

.layout-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 100rem;
  position: relative;
  width: 100%;
}

main .layout-content {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

header {
  color: var(--color--dark-purple);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}

#block-sethhill-primary-local-tasks {
  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }

  a {
    text-decoration: none;
  }
}

a {
  color: var(--color--green);
  text-decoration: none;

  &.is-active {
    color: var(--color--white);
  }
}

#block-sethhill-main-menu {
  ul.menu {
    font-weight: 700;
    list-style-type: none;
    margin: -0.25rem 0 0 0;
    padding: 0;

    @media (min-width: 600px) {
      align-items: center;
      display: flex;
      margin-top: 0;
    }

    @media (min-width: 1025px) {
      font-size: 1.2rem;
    }

    > li {
      box-sizing: border-box;
      margin: 0 1rem 0 0;
      padding: 0;
      display: grid;

      @media (min-width: 600px) {
        display: inline;
        margin-left: 3rem;
      }
    }

    > li:first-child {
      flex-basis: 100%;
      font-family: var(--font-display), sans-serif;
      font-size: 2rem;
      margin-left: 0;
      margin-right: 3.5rem;
    }
  }

  a {
    display: inline;
    padding: 0.25rem 0;

    @media (min-width: 600px) {
      display: inline;
      padding: 0;
    }

    &:hover {
      text-decoration: underline;
      text-decoration-color: var(--color--red);
      text-decoration-thickness: 2px;
      text-underline-offset: 8px;
    }

    &:focus {
      text-decoration: none;
      outline: 2px solid #00cc6d;
      outline-offset: 6px;
    }
  }
}

p {
  hyphenate-limit-chars: 8 3 4;
  hyphens: auto;
  margin-bottom: 1.5rem;
}

.view-projects {
  counter-reset: view;

  .view-content {
    display: grid;

    @media (min-width: 600px) {
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 9.09091%;
    }

    @media (min-width: 1025px) {
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 5.88235%;
    }
  }

  .views-row {
    counter-increment: view;
    margin-bottom: 2rem;
    position: relative;
  }

  .views-field-field-cover-image {
    flex-basis: 40%;
    left: -0.25rem;
    margin-bottom: 1ch;
    overflow: hidden;
    position: relative;
    z-index: 0;

    img {
      image-rendering: pixelated;
      position: relative;
      width: 100%;
      z-index: 0;
    }
  }

  .views-field-field-cover-image::after {
    content: "";
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    /* Mobile: 14x6 */
    background-image:
      repeating-linear-gradient(
        to right,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 7.14286%
      ),
      repeating-linear-gradient(
        to bottom,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 16.66667%
      );

    /* Tablet+: 10x6 */
    @media (min-width: 600px) {
      background-image:
        repeating-linear-gradient(
          to right,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 10%
        ),
        repeating-linear-gradient(
          to bottom,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 16.66667%
        );
    }
  }

  .views-field-title {
    font-family: var(--font-display), sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    max-width: 30ch;
    font-weight: 700;

    @media (min-width: 1025px) {
      font-size: 1.5rem;
    }

    &:before {
      content: counter(view, decimal);
      display: block;
      /* font-weight: 400; */
    }

    a {
      &:hover {
        text-decoration: underline;
        text-decoration-color: var(--color--red);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
      }

      &:active {
        text-decoration: underline;
        text-decoration-color: #00cc6d;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
      }

      &:focus {
        text-decoration: none;
        outline: 2px solid #00cc6d;
        outline-offset: 4px;
      }
    }
  }
}

.view-articles {
  .view-content {
    display: grid;

    @media (min-width: 600px) {
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 9.09091%;
    }

    @media (min-width: 1025px) {
      grid-column-gap: 5.88235%;
    }
  }

  .views-row {
    align-content: start;
    display: grid;
    grid-template-areas: "image meta" "image title";
    grid-template-columns: 2fr 5fr;
    grid-template-rows: min-content 1fr;
    position: relative;
    margin-bottom: 20%;

    @media (min-width: 600px) {
      grid-template-columns: 2fr 3fr;
      margin-bottom: 16.66667%;
    }

    @media (min-width: 1025px) {
      grid-template-columns: 2fr 6fr;
      margin-bottom: 11.76471%;
    }
  }

  .views-field-field-cover-image {
    grid-area: image;
    left: -0.25rem;
    position: relative;

    img {
      width: 100%;
    }
  }

  .views-field-field-cover-image::after {
    content: "";
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background-image:
      repeating-linear-gradient(
        to right,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 25%
      ),
      repeating-linear-gradient(
        to bottom,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 12.5%
      );
  }

  .views-field-title {
    font-family: var(--font-display), sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 700;
    grid-area: title;
    max-width: 30ch;
    z-index: 120;
    padding-left: 2.941176%;

    @media (min-width: 600px) {
      padding-right: 2rem;
    }

    @media (min-width: 1025px) {
      font-size: 1.5rem;
    }
  }

  .views-field-field-date {
    align-content: start;
    font-family: var(--font-display), sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    grid-area: meta;
    padding-right: 2rem;
    z-index: 120;
    padding-left: 2.941176%;

    @media (min-width: 1025px) {
      font-size: 1.5rem;
    }
  }

  a {
    &:hover {
      text-decoration: underline;
      text-decoration-color: var(--color--red);
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }

    &:active {
      text-decoration: underline;
      text-decoration-color: #00cc6d;
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }

    &:focus {
      text-decoration: none;
      outline: 2px solid #00cc6d;
      outline-offset: 4px;
    }
  }
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.field--name-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color--red);
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;

  &:hover {
    text-decoration-color: var(--color--green);
    text-decoration-thickness: 2px;
    outline-offset: 8px;
  }

  &:focus {
    text-decoration: none;
    outline: 2px solid #00cc6d;
    outline-offset: 8px;
  }
}

.title-area {
  margin: 0 0 2rem 0;

  h1 {
    margin-bottom: 0;
  }
}

.long-text {
  /* background-color: var(--color--white); */
  /* color: black; */
  font-weight: 700;
  line-height: 1.3333;
  padding: 2rem 0;

  @media (min-width: 600px) {
    /* padding: 4rem; */
    padding-top: 2rem;
  }

  @media (min-width: 1025px) {
    font-size: 1.2rem;
    /* padding: 6rem; */
    padding-top: 2rem;
  }

  > * {
    max-width: 60rem;
    /* margin-left: auto; */
    /* margin-right: auto; */
  }

  > .field--name-field-content {
    max-width: none;
  }

  h1 {
    font-family: var(--font-display), sans-serif;
    /* color: var(--color--dark-purple); */
    font-size: 2rem;
    line-height: 1.2;

    @media (min-width: 1025px) {
      font-size: 2.5rem;
      max-width: 36ch;
    }
  }

  h2 {
    /* color: var(--color--dark-purple); */
    font-family: var(--font-display), serif;
    font-size: 1.6rem;
  }

  code:not(.hljs) {
    color: var(--color--red);
  }

  pre {
    color: var(--color--blue);
    font-weight: normal;
    white-space: pre-wrap;
  }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color--bright-blue);
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;

    &:hover {
      text-decoration-color: var(--color--red);
      text-decoration-thickness: 4px;
    }

    &:focus {
      text-decoration: none;
      outline: 2px solid #00cc6d;
    }
  }

  figure {
    border-top: 1px solid var(--color--black);
    font-family: var(--font-display), serif;
    font-size: 1.1rem;
    margin: 4rem 0;
    padding: 0 0 2rem 0;

    figcaption {
      font-family: var(--font-display), serif;
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
      padding-top: 0.25rem;

      code {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
      }
    }

    ol,
    ul {
      line-height: 1.6;
    }

    ol {
      list-style-type: decimal;

      ol {
        list-style-type: lower-latin;
        margin-bottom: 0.75rem;
        margin-top: 0.5rem;
      }

      ul {
        list-style-type: square;
        margin-bottom: 0.75rem;
        margin-top: 0.5rem;
      }
    }
  }

  figure + figure {
    margin-top: -2rem;
  }

  strong {
    font-weight: 600;
  }
}

.path-frontpage,
.path-node,
.page-node-type-project,
.page-node-type-article {
  .field--name-field-date {
    font-family: var(--font-display), serif;
    font-size: 1.6rem;
    font-weight: 700;
  }
}

.node--type-project,
.node--type-article {
  .field--name-field-cover-image {
    left: -0.25rem;
    margin-bottom: 1.5rem;
    position: relative;

    img {
      width: 100%;
      aspect-ratio: 7 / 5;
      object-fit: cover;

      @media (min-width: 600px) {
        aspect-ratio: 11 / 5;
      }

      @media (min-width: 1025px) {
        aspect-ratio: auto;
      }
    }
  }

  .field--name-field-text {
    max-width: 60rem;
  }

}

.node--type-project,
.node--type-article {
  .field--name-field-cover-image::after {
    content: "";
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    /* Mobile: 14x10 */
    background-image:
      repeating-linear-gradient(
        to right,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 7.14286%
      ),
      repeating-linear-gradient(
        to bottom,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 10%
      );

    /* Tablet: 22x10 */
    @media (min-width: 600px) {
      background-image:
        repeating-linear-gradient(
          to right,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 4.54545%
        ),
        repeating-linear-gradient(
          to bottom,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 10%
        );
    }

    /* Desktop: 34x10 */
    @media (min-width: 1025px) {
      background-image:
        repeating-linear-gradient(
          to right,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 2.94118%
        ),
        repeating-linear-gradient(
          to bottom,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 10%
        );
    }
  }
}

.field--name-field-relationship {
  /* color: var(--color--gray--medium); */
  margin-top: 1.5em;
}

.meta {
  font-family: var(--font-text), sans-serif;
  line-height: 1.5;
  margin-bottom: 2rem;

  @media (min-width: 600px) {
    display: grid;
    grid-template-columns: fit-content(33%) auto;
  }

  @media (min-width: 1025px) {
    font-size: 1.2rem;
  }

  > .field {
    display: contents;

    > .field__label {
      font-size: 0.8em;
      line-height: 1.4;
      grid-column: 1;
      letter-spacing: 0.04rem;
      margin-bottom: 0.25rem;
      padding-right: 1.5rem;
      padding-top: 0.25rem;
      text-transform: uppercase;
      white-space: nowrap;

      @media (min-width: 600px) {
        margin-bottom: 1rem;
      }
    }

    > .field__item,
    > .field__items {
      grid-column: 2;
      margin-bottom: 0.5rem;

      @media (min-width: 600px) {
        margin-bottom: 1rem;
      }
    }
  }
}

.block-inline-blockbanner {
  margin-bottom: 2rem;
  position: relative;

  .field--name-body {
    display: none;
    padding-left: 4.16667%;
    padding-top: 4.16667%;
    position: absolute;
    z-index: 1;
  }

  .field--name-field-media {
    left: -0.25rem;
    position: relative;
  }

  .field--name-field-media::before {
    content: "";
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;

    background-color: var(--color--white);
    mask-image: radial-gradient(transparent 62%, rgb(255, 255, 255) 63%);
    mask-size: 14.28571% 14.28571%;

    @media (orientation: landscape) {
      mask-size: 9.09091% 14.28571%;
    }

    @media (min-width: 600px) {
      mask-size: 9.09091% 14.28571%;
    }

    @media (min-width: 1200px) and (orientation: landscape) {
      mask-size: 5.88325% 14.28571%;
    }

    @media (min-width: 1025px) {
      mask-size: 5.88325% 14.28571%;
    }
  }
}

.layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first {
  flex-basis: 100%;

  @media screen and (min-width: 40em) {
    width: inherit;
    flex-basis: inherit;
  }

  @media (min-width: 1025px) {
    width: 52.94118%;
    flex-basis: 52.94118%;
  }
}

.layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
  flex-basis: 100%;

  @media screen and (min-width: 40em) {
    width: inherit;
    flex-basis: inherit;
  }

  @media (min-width: 1025px) {
    width: 47.05882%;
    flex-basis: 47.05882%;
  }
}

.paragraph--type--banner {
  .field--name-field-media {
    margin-bottom: 2rem;
    position: relative;
  }

  .field--name-field-media::after {
    content: "";
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    /* Mobile: 14x14 */
    background-image:
      repeating-linear-gradient(
        to right,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 7.14286%
      ),
      repeating-linear-gradient(
        to bottom,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 7.14286%
      );

    /* Tablet: 22x14 */
    @media (min-width: 600px) {
      background-image:
        repeating-linear-gradient(
          to right,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 4.54545%
        ),
        repeating-linear-gradient(
          to bottom,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 7.14286%
        );
    }

    /* Desktop: 34x14 */
    @media (min-width: 1025px) {
      background-image:
        repeating-linear-gradient(
          to right,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 2.94118%
        ),
        repeating-linear-gradient(
          to bottom,
          var(--color--blue--dark) 0px,
          var(--color--blue--dark) 4px,
          transparent 4px,
          transparent 7.14286%
        );
    }
  }

  .field--name-field-text {
    font-family: var(--font-display), serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 3rem 0;
    max-width: 36ch;
    padding: 0;

    @media (min-width: 1025px) {
      font-size: 2.5rem;
      line-height: 1.2;
    }
  }
}

.paragraph--type--text {
  /* max-width: 40rem; */
  margin-left: auto;
  margin-right: auto;
}

.page-node-type-page .paragraph--type--text {
  margin-left: 0;
}

.paragraph--type--image-group {
  margin-top: 3rem;
  margin-bottom: 3rem;

  /* @media (min-width: 600px) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  @media (min-width: 1025px) {
    margin-left: -3rem;
    margin-right: -3rem;
  } */

  > .field__items {
    display: grid;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 4px;

    @media (min-width: 600px) {
      grid-template-columns: repeat(4, 1fr);
    }

    > .field__item {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
        aspect-ratio: 16/9;
        /* border-radius: 0.25rem; */
        box-shadow: 0 0.25em 2em #18385c1a;
      }
    }

    @media (min-width: 600px) {
      .field__item:nth-child(1) {
        grid-row: span 2 / auto;
        grid-column: span 2 / auto;

        img {
          /* border-radius: 0.5rem; */
        }
      }

      .field__item:nth-child(4) {
        grid-column: span 2 / auto;

        img {
          /* border-radius: 0.5rem; */
        }
      }
    }
  }
}

.paragraph--type--statistic {
  background-color: var(--color--blue);
  border-radius: 1rem;
  box-sizing: border-box;
  color: var(--color--white);
  padding: 0.75rem 1rem;
  text-align: center;
  display: grid;
  height: 100%;
  align-content: center;
  margin-bottom: 0.5rem;

  @media (min-width: 600px) {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 0;
  }

  @media (min-width: 1025px) {
    aspect-ratio: 16/7;
  }

  .field--name-field-stat {
    color: var(--color--white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  .field--name-field-description {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02rem;
    line-height: 1.3;
    color: var(--color--brighter-blue);
  }
}

.paragraph--type--stat-group {
  margin-top: 3rem;
  margin-bottom: 3rem;

  .layout__region--content {
    /* margin-left: auto;
    margin-right: auto; */
    box-sizing: border-box;

    @media (min-width: 600px) {
      max-width: 42rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1em;
    }

    @media (min-width: 1025px) {
      max-width: 46rem;
    }
  }
}

.paragraph--type--linkedin-image {
  .field--name-field-media {
    left: -0.25rem;
    position: relative;
    /* border: 1rem solid white;
    border-left-width: 3rem;
    border-right-width: 3rem; */
  }

  .field--name-field-media {
    border-right: 4px solid var(--color--blue--dark);
    border-bottom: 4px solid var(--color--blue--dark);
  }


  .field--name-field-media::after {
    content: "";
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background-image:
      repeating-linear-gradient(
        to right,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 4.16667%
      ),
      repeating-linear-gradient(
        to bottom,
        var(--color--blue--dark) 0px,
        var(--color--blue--dark) 4px,
        transparent 4px,
        transparent 16.66667%
      );
  }
}

.paragraph--type--linkedin-post {
  .field--name-field-media {
    left: -0.25rem;
    position: relative;
    /* border: 1rem solid white; */
    /* border-left-width: 3rem;
    border-right-width: 3rem; */
  }

  .field--name-field-media::before {
    content: "";
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;

    background-color: white;
    mask-image: radial-gradient(transparent 62%, rgb(255, 255, 255) 63%);
    mask-size: 8.3333% 16.66667%;
  }
}

.paragraph--type--profile-photo {
  max-width: 41.17647%;

  .field--name-field-media {
    left: -0.25rem;
    position: relative;
  }

  .field--name-field-media::before {
    content: "";
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;

    background-color: var(--color--white);
    mask-image:
      radial-gradient(transparent 62%, rgb(255, 255, 255) 63%),
      radial-gradient(transparent 62%, rgb(255, 255, 255) 63%),
      radial-gradient(transparent 62%, rgb(255, 255, 255) 63%),
      radial-gradient(transparent 62%, rgb(255, 255, 255) 63%),
      radial-gradient(transparent 62%, rgb(255, 255, 255) 63%);
    mask-size:
      14.28571% 14.28571%,
      14.28571% 14.28571%,
      14.28571% 14.28571%,
      14.28571% 14.28571%,
      71.42857% 71.42857%;
    mask-repeat:
      repeat-x,
      repeat-y,
      repeat-y,
      repeat-x,
      no-repeat;
    mask-position:
      left top,
      left top,
      right top,
      left bottom,
      center center;
  }

  img {
    width: 100%;
  }
}