.team-section {
  background-color: var(--color-background);
  position: relative;
  & .overlay {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -0;
  }
  & .team-section__container {
    max-width: 100%;
    padding-block: 64px;
    padding-inline: 0;
    position: relative;
    z-index: 6;
    @media (width >= 1024px) {
      padding-block: 80px;
      padding-inline: 0;
    }
    & .pre-title {
      margin-bottom: 16px;
      text-align: center;
    }
    & .team-section__title {
      letter-spacing: 0;
      line-height: 1.2;
      text-align: center;
      text-transform: capitalize;
      margin-bottom: 0;
      margin-top: 0;
    }
    & .team-section__grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      margin-top: 48px;
      @media (width >= 640px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      @media (width >= 768px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      @media (width >= 1024px) {
        margin-top: 64px;
      }

      & .team-section__card {
        background-color: var(--color-background);
        border: 1px solid rgba(164, 108, 50, 0.4);
        position: relative;
        & .team-card__image-wrapper {
          background-color: rgb(0 0 0 / 0.05);
          height: 320px;
          @media (width >= 1024px) {
            height: 240px;
          }
          @media (width >= 1280px) {
            height: 320px;
          }
          & .team-card__image {
            aspect-ratio: 1;
            height: 100%;
            object-fit: contain;
            object-position: bottom;
            width: 100%;
          }
        }
        & .team-card__content {
          align-items: center;
          display: flex;
          gap: 16px;
          justify-content: space-between;
          padding-block: 20px;
          padding-inline: 16px;
          @media (width >= 1280px) {
            padding-inline: 32px;
          }
          & .team-card__info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            & .team-card__name {
              color: var(--color-foreground-heading);
              font-weight: 600;
              line-height: 1.2;
              margin-bottom: 0;
            }
            & .team-card__role {
              color: var(--color-foreground);
              font-family: var(--font-body--family);
              font-size: 14px;
              font-weight: 400;
              line-height: 1.5;
              margin-top: 0;
              @media (width >= 64rem /* 1024px */) {
                font-size: 16px;
              }
            }
          }
          & .team-card__social-link {
            align-items: center;
            border: 1px solid rgb(211, 165, 116);
            border-radius: 40px;
            display: flex;
            height: 40px;
            justify-content: center;
            min-width: 40px;
            overflow: hidden;
            padding: 4px;
            background: #f8f3ec80;

            @media (width >= 1024px) {
              padding: 10px;
            }
            & .team-card__social-icon-wrapper {
              align-items: center;
              background-color:rgb(211, 165, 116);
              border-radius: 100%;
              display: flex;
              height: 20px;
              justify-content: center;
              min-width: 20px;
              width: 20px;
              & .team-card__social-icon {
                fill:white;
                height: 10px;
                width: 10px;
              }
            }
          }
        }
      }
    }
  }
}