#block-painting-banner {
  position: relative;
  max-width: 2000px;
  width: 100%;
  .content-section {
    position: absolute;
    backdrop-filter: blur(3px);
    padding: 2rem 16px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
    color: white;
    width: 50%;
    z-index: 30;
    text-align: center;

    .field--name-field-banner-title {
      font-size: clamp(36px, 4vw, 58px);
      line-height: 1.15;
      text-wrap: balance;
      font-weight: 500;
      font-family: var(--font-title), serif;
      margin-bottom: 20px;
    }
    .field--name-field-banner-info {
      font-size: 18px;
      font-family: var(--font-body), sans-serif;
      margin-bottom: 32px;
    }
    .field--name-field-banner-link {
      display: flex;
      justify-content: center;
      a {
        display: flex;
        gap: 25px;
        font-weight: bold;
        border-radius: 5px;
        text-decoration: none;
        color: var(--color-white);
        padding: 15px 100px;
        text-transform: uppercase;
        border: 1px solid var(--color-white);
        align-items: center;
        margin: auto;
        background: transparent;
        transition: 0.4s ease;

        &:after {
          content: '\F138';
          font-family: "bootstrap-icons";
          color: var(--color-white);
          font-size: 20px;
        }

        &:hover {
          background: var(--color-text);
        }
      }
      @media (max-width: 768px) {
        a {
          padding: 15px 50px;
        }
      }
    }
  }

  .field--name-field-banner-media {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 1000% !important;
    width: auto !important;
    text-align: center;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.5;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .field--name-field-media-video-file {
      video {
        width: 100%;
        height: auto;
        aspect-ratio: 20 / 8;
      }
    }
  }
  @media (max-width: 992px) {
    .content-section {
      width: 100%;
      padding-block: 32px 40px;
      position: relative;
      top: 0;
      left: 0;
      transform: unset;
      color: var(--color-brown-200);
      .field--name-field-banner-link a {
        background: var(--color-text);
        &:hover {
          backdrop-filter: blur(15px);
          border-color: rgba(255, 255, 255, 0.5);
          /* Keep the hover target stationary. */
          box-shadow: 3px 3px 22px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

}

#block-painting-concept,
#block-painting-discover-art {
  .main-wrapper {
    max-width: 2000px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .content-section {
      color: var(--color-text);
      width: 50%;
      padding-top: 70px;
      padding-bottom: 70px;
      text-align: center;
      margin: auto;

      .field--name-field-subtitle {
        color: var(--color-brown-200);
        font-weight: bold;
        font-size: 20px;

        &:after {
          content: '';
          display: block;
          width: 50px;
          height: 3px;
          border-radius: 10px;
          margin: 20px auto 0 auto;
          background: var(--color-brown-200);
        }
      }

      .field--name-field-title {
        font-size: clamp(32px, 4vw, 50px);
        font-family: var(--font-title), serif;
        margin: 20px 0;
        font-weight: 500;
      }
    }
  }
}

#block-painting-concept {
  .main-wrapper {
    position: relative;
    .container {
      backdrop-filter: blur(3px);
      z-index: 30;
      position: relative;
    }
    .content-section {
      position: relative;
      z-index: 40;
      .field--name-field-short-description {
        font-size: 18px;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
        font-family: var(--font-title), serif;
        font-style: italic;
        opacity: 0.8;
      }
    }
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0.5;
      z-index: 1;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(28px);
    }
    @media (max-width: 1400px) {
      .content-section {
        width: 50%;
      }
    }
    @media (max-width: 768px) {
      .content-section {
        width: 100%;
      }
    }
  }

}

#block-painting-discover-art {
  .main-wrapper .content-section {
    width: 100%;
    .field--name-field-short-description {
      color: var(--color-text);
      font-size: 18px;
      font-style: italic;
      opacity: 0.8;
    }
    .field--name-field-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      a {
        display: flex;
        border-radius: 5px;
        border: 1px solid var(--color-brown-200);
        color: var(--color-brown-200);
        padding: 12px 20px;
        text-decoration: none;
        text-transform: uppercase;
        gap: 15px;
        font-weight: 500;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
        &:before {
          font-family: "bootstrap-icons";
          color: var(--color-brown-200);
        }
        &:after {
          content: '\F138';
          font-family: "bootstrap-icons";
          color: var(--color-brown-200);
        }
        &:hover {
          background: var(--color-brown-200);
          color: var(--color-white);
          &:before, &:after {
            color: var(--color-white);
          }
        }
      }
      & > .field__item:first-child a {
        &:before {
          content: '\F42B';
        }
      }
      & > .field__item:nth-child(2) a {
        &:before {
          content: '\F4E1';
        }
      }
    }
  }

}
.block-page-title-block {
  margin: 1.5rem 0;
  .page-title {
    font-family: var(--font-title), serif;
    font-size: 2rem;
    &:after {
      content: '';
      display: block;
      width: 40px;
      height: 2px;
      border-radius: 10px;
      background: var(--color-text);
    }
  }
}