

/* Start:/local/templates/ugla-shop/components/bitrix/news.detail/blog/style.css?17877490772077*/

.block--banner {
  .banner {
    width: 100%;
    position: relative;
    position: 0;

    picture {
      width: 100%;
      object-fit: contain;
      position: relative;
      z-index: 0;

      @media screen and (max-width: 768px) {
        &::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 1;
          background: linear-gradient(180deg, rgba(240, 240, 240, 0) 50%, #F0F0F0 65.35%);
        }
      }
    }

    .text {
      position: absolute;
      left: 50px;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      margin-top: -22px;
      z-index: 1;
      width: calc(100% - 100px);

      .title {
        font-size: calc(24px + 8 * ((100vw - 375px) / 1575));
        color: var(--title-color);
        margin-bottom: 0;
      }
      .caption {
        font-size: calc(16px + 0 * ((100vw - 375px) / 1575));
        color: var(--color);
        max-width: 50%;
        
        &:not(:first-child) {
          margin-top: 20px;
        }
      }
      .button {
        column-gap: 24px;
        font-weight: 400;

        &:not(:first-child) {
          margin-top: 32px;
        }
      }

      @media screen and (max-width: 1024px) {
        & {
          margin-top: 0;
          left: 24px;
          right: 24px;
          width: calc(100% - 48px);

          .caption {
            &:not(:first-child) {
              margin-top: 10px;
            }
          }
          .button {
            display: none;
          }
        }
      }

      @media screen and (max-width: 768px) {
        & {
          top: auto;
          bottom: 30px;
          transform: none;
          left: 15px;
          right: 15px;
          width: calc(100% - 30px);

          .caption {
            max-width: 100%;

            &:not(:first-child) {
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}
/* End */
/* /local/templates/ugla-shop/components/bitrix/news.detail/blog/style.css?17877490772077 */
