@use "sass:math";

.frame-type-image {
  &.frame-option-25 {
    padding-bottom: 0;

    .frame-inner {
      background-color: white;

      @include media-breakpoint-up(lg) {
        background-color: transparent;
      }

      @include media-breakpoint-down(md) {
        .gallery-row {
          margin-left: 0;
          margin-right: 0;

          .gallery-item {
            padding-left: 0;
            padding-right: 0;
          }
        }
      }

      .image-subline {
        position: relative;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -75%);
        text-align: center;
        z-index: 32;

        @include media-breakpoint-up(lg) {
          position: absolute;
          transform: translate(-50%, 15%);
          width: 100%;
        }

        h1 {
          background-color: $primary;
          display: inline;
          font-size: 3rem;
          padding: 1rem;
          -webkit-box-decoration-break: clone;
          box-decoration-break: clone;

          @include media-breakpoint-down(md) {
            font-size: 2.25rem;
          }

          @include media-breakpoint-down(sm) {
            font-size: 1.875rem;
          }

          span {
            display: inline;
            position: relative;
            color: white;
            padding: 0 5px;

            font-weight: 800;

            @include media-breakpoint-down(md) {
              font-size: 2.25rem;
              font-weight: 700;
            }

            @include media-breakpoint-down(sm) {
              font-size: 1.875rem;
            }
          }

          .element-subheader {
            font-size: 2rem;
            font-weight: 700;

            text-transform: uppercase;

            @include media-breakpoint-down(md) {
              font-size: 1.375rem;
            }
          }
        }
      }
    }
  }
}

#c303.frame-type-image {
  &.frame-option-25 {
    .frame-inner {
      .image-subline {
        @include media-breakpoint-up(xl) {
          position: absolute;
          left: 30%;
          bottom: 20%;
          max-width: 650px;
          text-align: left;
          transform: translate(-50%, 0);
        }

        h1 {
          @include media-breakpoint-up(lg) {
            font-size: 4.5rem;
          }

          span {
            display: inline;
          }

          .element-subheader {
            display: none;
          }
        }
      }
    }
  }
}