@import url("/static-06f3eb/css/pages/about/driver_card/driver_card.css");

/* Base styles */
@import url("/static-06f3eb/css/pages/base.css");

main {
  grid-column: 2 / 2;
  padding-block: 85px 65px;
  padding-inline: 32px;

  color: #747f9f;
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

main h2 {
  font-weight: 400;
}

main > header {
  display: flex;
  flex-direction: column;
}

.about-banner {
  position: relative;
  width: 100%;
  min-height: 200px;
  margin-block-start: 68px;

  aspect-ratio: 3.04 / 1;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 10px;
  border: 1px solid rgba(0, 184, 219, 0.3);
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 25px 50px -12px rgba(0, 184, 219, 0.2);
  overflow: hidden;
}

.about-banner > img {
  height: 100%;
  aspect-ratio: 3.06 / 1;
}

.about-banner > span {
  position: absolute;
  bottom: 10px;

  display: flex;
  height: 20px;
  align-items: flex-start;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);

  color: #D1D5DC;
  text-align: center;
  font-family: Arial;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
}

.about-primary-article,
.about-secondary-article {
  max-width: 766px;
  width: 100%;
  margin-inline: auto;
}

.about-primary-article > h2,
.about-secondary-article > h2,
.drivers-article {
  margin-block: 78px 25px;

  color: #edeef5;
  text-align: center;
  font-size: 30px;
  line-height: 36px;
}

.about-primary-article > p,
.about-secondary-article > p {
  margin-block-end: 16px;
}

.drivers-article {
  width: 100%;
  margin-block-end: 82px;
}

.drivers-article > h2 {
  margin-block-end: 50px;
}

.card-container {
  box-sizing: border-box;
  width: 100%;
  padding-inline: 32px;

  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 64px 32px;
}

.roadmap-article {
  display: flex;
  flex-direction: column;
  gap: 16px;

  width: 100%;
  padding-inline: clamp(32px, 10vw, 224px);
  padding-block: 46px 49px;

  border-radius: 10px;
  border: 1px solid rgba(0, 184, 219, 0.2);
  background: linear-gradient(135deg, rgba(0, 184, 219, 0.1) 0%, rgba(173, 70, 255, 0.1) 100%);
  box-shadow: 0 10px 15px -3px rgba(0, 184, 219, 0.1), 0 4px 6px -4px rgba(0, 184, 219, 0.1);
}

.roadmap-article > h2 {
  margin-block-end: 9px;

  color: #edeef5;
  text-align: center;
  font-family: Arial;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

.roadmap-article > .quote {
  width: 100%;
  padding-block-start: 15px;
  text-align: center;
  font-style: italic;

  border-top: 1px solid rgba(0, 184, 219, 0.2);
}