require('../../utils/styles/colors.js');
@import 'src/utils/styles/common.scss';

.profileWrapper {
  margin: 50px auto;
  text-align: center;

  p {
    font-size: 20px;
  }

  a {
    font-size: 40px;
    color: $grey_350;
    word-wrap: break-word;
  }

  .buttonWrapper {
    text-align: end;

    .editButton {
      outline: none;
      cursor: pointer;
      background-color: $teal_400;
      font-size: 16px;
      color: $white;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      margin-left: 20px;

      &:hover {
        background-color: $teal_500;
      }
    }
  }

  .avatar {
    margin-top: 20px;
  }

  .organizationName {
    text-transform: uppercase;
    margin-top: 40px;
  }

  .border {
    text-align: left;
    border-left: 5px solid;
    padding: 10px 30px;
    margin: 40px 0;
  }

  .aboutBorder {
    border-color: $ambar_400;
  }

  .phoneBorder {
    border-color: $pink_400;
  }

  .addressBorder {
    border-color: $purple_400;
  }

  .imagesBorder {
    border-color: $teal_400;
  }

  .arrowWrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 50px;

    .carouselWrapper {
      width: 85%;

      img {
        height: 350px;
        object-fit: contain;
      }
    }
  }
}

@media (max-width: 1110px) {
  .profileWrapper {
    .arrowWrapper {
      .carouselWrapper {
        img {
          height: 320px;
        }
      }
    }
  }
}

@media (max-width: 920px) {
  .profileWrapper {
    .arrowWrapper {
      .carouselWrapper {
        img {
          height: 270px;
        }
      }
    }
  }
}

@media (max-width: 696px) {
  .profileWrapper {
    a {
      font-size: 30px;
    }

    .buttonWrapper {
      text-align: center;
      .editButton {
        margin-left: 15px;
      }
    }

    .arrowWrapper {
      .carouselWrapper {
        img {
          height: 200px;
        }
      }
    }
  }
}

@media (max-width: 575px) {
  .profileWrapper {
    .arrowWrapper {
      .carouselWrapper {
        img {
          height: 220px;
        }
      }
    }
  }
}