/* General Classes */
.of-card {
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px 0 #dedede;
}

.of-card-title {
  color: #3f3f46;
}

.of-card-description {
  color: #52525b;
}

/* Specific Classes */
/* Main Section */

.about-bg {
  background: url("../images/about-bg.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

.about-main {
  position: relative;
  overflow-x: hidden;
  width: calc(100% - 40px);
  margin: auto;
  max-width: 1920px;
  padding: 10px;
}

.about-main-card1,
.about-main-card3 {
  border-radius: 15px;
}

.about-heading {
  height: 94px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 14px auto;
  padding: 0 0.5rem;
}

.about-main > div {
  display: grid;
  grid-template-areas:
    "card1"
    "card2"
    "card3"
    "card4";
  grid-template-rows: 480px 320px 480px 320px;
  gap: 24px;
}

.about-main > div > div:first-child {
  grid-area: card1;
}

.about-main > div > div:nth-child(2) {
  grid-area: card2;
}

.about-main > div > div:nth-child(3) {
  grid-area: card3;
}

.about-main > div > div:last-child {
  grid-area: card4;
}

.about-main-card1,
.about-main-card2,
.about-main-card3,
.about-main-card4 {
  height: 100%;
}

.about-main-card2,
.about-main-card4 {
  display: flex;
}

.about-main-card2-info,
.about-main-card4-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-main-card1-wrapper,
.about-main-card3-wrapper {
  background: url("../images/about-card.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  height: 100%;
}

.about-main-card2 .of-card-title,
.about-main-card4 .of-card-title {
  margin: 1rem 0rem;
}

/* Team Section */
.about-cards {
  width: calc(100% - 40px);
  margin: auto;
  max-width: 1920px;
  padding: 0 10px;
}

.about-cards > h1 {
  margin-bottom: 35px;
  font-size: 24px;
  text-align: center;
}

.about-cards-container {
  display: none;
}

.about-cards-container > div {
  width: 100%;
}

.about-cards-container div:first-child .about-img-container,
.about-lcard-img-container1 {
  background-image: url("../images/about-isaac.png");
}

.about-cards-container div:nth-child(2) .about-img-container,
.about-lcard-img-container2 {
  background-image: url("../images/about-ashish.png");
}

.about-cards-container div:last-child .about-img-container,
.about-lcard-img-container3 {
  background-image: url("../images/about-jin.png");
}

.about-img-container,
.about-lcard-img-container1,
.about-lcard-img-container2,
.about-lcard-img-container3 {
  width: 100%;
  height: 330px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.about-lcards-container {
  width: calc(100% - 40px);
  padding: 10px;
}

.about-lcard-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.about-lcard-text-wrapper {
  display: flex;
  flex-direction: column;
  align-content: end;
}

.about-lcard-wrapper h4 {
  padding: 1.5rem;
}

.about-lcard-wrapper p {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

@media (min-width: 430px) {
  .about-lcard-img-container1,
  .about-lcard-img-container2,
  .about-lcard-img-container3 {
    height: 430px;
  }
}

@media (min-width: 744px) {
  /* Main Section */
  .about-main {
    width: calc(100% - 90px);
  }

  .about-main > div {
    grid-template-areas:
      "card2 card1"
      "card3 card4";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 460px 460px;
  }

  .about-heading {
    height: 134px;
    margin: 14px auto 24px;
  }

  .about-main-card2 .of-card-title,
  .about-main-card4 .of-card-title {
    margin: 1.5rem 0rem;
  }

  /* Team */
  .about-cards {
    width: calc(100% - 90px);
  }

  .about-lcards-container {
    width: calc(100% - 90px);
  }

  .about-lcard-img-container1,
  .about-lcard-img-container2,
  .about-lcard-img-container3 {
    height: 430px;
  }

  .about-lcard-text-wrapper {
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  /* Main Section */
  .about-main > div {
    grid-template-rows: 360px 360px;
  }

  /* Team Section */
  .about-cards {
    width: calc(100% - 90px);
    margin-bottom: 1.5rem;
  }

  .about-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    gap: 1.5rem;
    width: 100%;
  }

  .about-cards-container > div {
    width: 100%;
    /* grid-template-rows: 530px 130px auto; */
  }

  .about-cards-container h4,
  .about-lcards-container h4 {
    padding: 1.75rem;
    text-align: left;
  }

  .about-cards-container p {
    padding: 0 1.75rem 2rem;
  }

  .about-img-container {
    height: 530px;
  }

  .about-lcards-container {
    display: none;
  }
}

@media (min-width: 1280px) {
  /* Main Section */
  .about-main {
    width: calc(100% - 190px);
  }

  .about-heading {
    height: 174px;
    margin: 30px auto 40px;
  }

  .about-main > div {
    grid-template-rows: 430px 430px;
    gap: 40px;
  }

  .about-main-card2 .of-card-title,
  .about-main-card4 .of-card-title {
    margin: 2.5rem 0rem;
  }

  /* Team Section */
  .about-cards {
    width: calc(100% - 190px);
    margin-bottom: 2.5rem;
  }

  .about-cards-container {
    gap: 3rem;
  }
}

/* For 1920px above */
@media (min-width: 1920px) {
  /* Main Section */
  .about-main > div {
    grid-template-rows: 690px 690px;
    gap: 40px;
  }
}

@media (min-width: 2560px) {
  /* Main Section */

  /* Team Section */
  .about-cards-container > div {
    grid-template-rows: 530px 90px auto;
  }
}