.behind-the-code {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    align-items: flex-end;
    gap: 36px;
    @media (max-width: 1024px) {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;
    }
    .names {
      position: absolute;
      top: 280px;
      left: 130px;
      color: var(--c-gray-25);
      z-index: 1;
      display: flex;
      gap: 60px;
      font-style: italic;
      @media (max-width: 1024px) {
        display: none;
      }
    }
    figure {
      max-width: 682px;
      height: 100%;
      width: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .info {
      width: 40%;
      @media (max-width: 1024px) {
        width: 100%;
        max-width: 500px;
      }
      .text {
        margin-bottom: 40px;
        font-family: 'Inter';
        @media (max-width: 1024px) {
          font-size: 18px;
        }
      }
      .cta-dark {
        &:nth-child(2) {
          margin-bottom: 14px;
          figure {
            img {
              margin-top: 4px;
            }
          }
        }
        a {
          background: var(--c-gray-900);
          color: var(--c-gray-25);
          padding: 21px 40px;
          width: 270px;
          justify-content: center;
          display: flex;
          gap: 10px;
          align-items: center;
          border-radius: 30px;
          border: 1px solid var(--c-gray-900);
          white-space: nowrap;
          font-weight: 700;
          font-size: 31px;
          font-family: var(--ff-secondary);
          line-height: 106%;
          transition: all 0.3s ease;
          cursor: pointer;
          @media (max-width: 1024px) {
            margin: 0 auto;
            margin-bottom: 16px;
          }
          figure {
            max-height: 40px;
            max-width: 40px;
            &.youtube {
              max-height: 50px;
              max-width: 50px;
              svg {
                margin-top: 6px;
              }
            }
            svg {
              margin-top: 2px;
              width: 100%;
              height: 100%;
              object-fit: contain;
              transition: all 0.3s ease;
            }
          }
          &:hover {
            background: var(--c-gray-25);
            color: var(--c-gray-900);
            figure {
              svg {
                stroke: var(--c-gray-900);
                path {
                  fill: var(--c-gray-900);
                }
              }
            }
          }
        }
      }
    }
  }
}