.Offer {
  background: $color-lightgray;
  border-radius: 28px;
  padding: 160px;

  .Title {
    font-family: $font-open-sans;
    font-weight: $font-semi-bold;
    font-size: 60px;
    line-height: 100%;
    color: $color-text;
    max-width: 1330px;
    margin-bottom: 80px;
  }

  .Text {
    font-family: $font-open-sans;
    font-weight: $font-regular;
    font-size: 32px;
    line-height: 100%;
    color: $color-text;
    margin-bottom: 20px;
  }

  .List {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1330px;
    margin-bottom: 60px;

    .ListItem {
      font-family: $font-open-sans;
      font-weight: $font-regular;
      font-size: 32px;
      line-height: 160%;
      color: $color-text;
      list-style-type: decimal;
      margin-left: 40px;
    }
  }

  .RowForm {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
  }

  .Inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: $color-white;
    border-radius: 28px;
    padding: 80px 40px;
    margin-bottom: 130px;

    .Title {
      font-family: $font-open-sans;
      font-weight: $font-semi-bold;
      font-size: 60px;
      line-height: 1;
      color: $color-text;
    }

    .Grid {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      padding: 40px 0;
    }

    .Tile {
      position: relative;
      padding: 25px;
      height: 352px;
      border-radius: 28px;
      overflow: hidden;

      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        background-color: rgba(#292E3D, .7);
        transition: 250ms background-color;
      }

      &:hover {
        &:after {
          background-color: rgba(#292E3D, .5);
        }

        .Title {
          display: none;
        }

        .Description {
          display: block;
        }

        .Arrow {
          transform: rotate(45deg);
          transition: transform 250ms ease-in-out;
        }
      }

      .Background {
        position: absolute;
      }

      .Title {
        position: relative;
        z-index: 2;
        font-family: $font-open-sans;
        font-weight: $font-regular;
        font-size: 42px;
        line-height: 100%;
        color: $color-white;
      }

      .Description {
        position: relative;
        z-index: 2;
        display: none;
        font-family: $font-open-sans;
        font-weight: $font-regular;
        font-size: 24px;
        line-height: 130%;
        color: $color-white;
      }

      .Arrow {
        position: absolute;
        z-index: 2;
        right: 25px;
        bottom: 25px;
        width: 64px;
        height: 64px;
        transform: rotate(-135deg);
        transition: transform 250ms ease-in-out;
      }
    }
  }

  .Form {
    position: relative;
    padding: 40px 60px;
    background: #292E3D;
    border-radius: 28px;
    overflow: hidden;
    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      background-color: rgba(#163055, .6);
      transition: 250ms background-color;
    }

    .Background {
      position: absolute;
      object-fit: cover;
      z-index: 1;
    }

    .SubTitle {
      position: relative;
      z-index: 2;
      font-family: $font-open-sans;
      font-weight: $font-light;
      font-size: 30px;
      line-height: 100%;
      color: $color-white;
      margin-bottom: 16px;
    }

    .Title {
      position: relative;
      z-index: 2;
      font-family: $font-open-sans;
      font-weight: $font-regular;
      font-size: 48px;
      line-height: 130%;
      color: $color-white;
      max-width: 660px;
      margin: 0;
    }

    .Input{
      position: absolute;
      z-index: 2;
      right: 60px;
      bottom: 40px;
    }
  }
}