.offerings-block {
  position: relative;
  overflow: hidden;
  background: #151316;
  color: #FFFFFF;

  padding-top: 64px;
  padding-bottom: 64px;

  min-height: calc(340px + 128px);

  &::before {
    content: "";
    position: absolute;
    width: 1111px;
    max-width: 80%;
    height: 293px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -281px;
    background: radial-gradient(
                  ellipse at 13.08% 81.13%, 
                  #4500F9 0%, 
                  #8752FA 30.29%, 
                  #CD83FF 67.31%, 
                  #FF5001 100%
                ), #D9D9D9;
    filter: blur(150px);
    z-index: 1;


    @media screen and (max-width: 600px) {
      height: 97.06px;
      bottom: -95.49px;
      filter: blur(100px);
      max-width: 90%;
    }

  }
    
  .offerings-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;

    .offering {

      border: 1px solid currentColor;
      padding: 16px;
      line-height: 1.25;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: pointer;
      margin: 1px;
      text-align: center;

      @media screen and (min-width: 600px) {
        &:hover {
          margin: 0;
          box-shadow: 0px 0px 14px rgba(255, 80, 1, 0.7);
          border: 2px solid;
          border-image: linear-gradient(135.25deg, #4500F9 0%, #8752FA 30.29%, #CD83FF 67.31%, #FF5001 100%) 1;
        }
      }
    }
  }

  .offering-modal {
    display: none;

    &.active {
      display: block;
    }

    .offering-modal-body {
      display: flex;
      gap: 64px;
      align-items: flex-start;
      justify-content: center;

      @media screen and (max-width: 990px) {
        flex-direction: column;
        gap: 32px;
        max-width: 590px;
          margin: 0 auto;
      }

      .offering-modal-header {
        box-shadow: 0px 0px 14px rgba(255, 80, 1, 0.7);
        border: 2px solid;
        border-image: linear-gradient(135.25deg, #4500F9 0%, #8752FA 30.29%, #CD83FF 67.31%, #FF5001 100%) 1;
        padding: 16px;
        line-height: 1.25;
        font-weight: 700;
        background: #151316;
        flex: 0 0 340px;
        max-width: fit-content;

        @media screen and (max-width: 990px) {
          flex: 1;
          order: 2;
          
        }

        .offering-modal-title {
          text-align: center;
          text-wrap-style: balance;
        }
      }

      .offering-modal-text {
        max-width: 590px;
        flex: 1;

        @media screen and (max-width: 990px) {
          order: 3;
        }
      }

      button.offering-modal-close {
        appearance: none;
        border: none;
        background: none;

        @media screen and (max-width: 990px) {
          align-self: flex-end;
          order: 1;
          
        }

        svg path {
          fill: #D9D9D9;
        }
      }
    }
  }

  .offering-modal.active + .offerings-tags-wrapper {
    display: none;
  }
}