/* || Reset */

*,
*::before ,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* || Variables */

:root {
  /* colors */
  --Red: hsl(0, 78%, 62%);
  --Cyan: hsl(180, 62%, 55%);
  --Orange: hsl(34, 97%, 64%);
  --Blue: hsl(212, 86%, 64%);
  --Grey-500: hsl(234, 12%, 34%);
  --Grey-400: hsl(212, 6%, 44%);
  --White: hsl(0, 0%, 100%);

  /* fonts */
  --FF: "Poppins", sans-serif;
  --FW-ExtraLight: 200;
  --FW-Regular: 400;
  --FW-Semibolld: 600;
}

/* || General */
html {
  font-size: 15px;
  font-family: var(--FF);
}

body {
  min-height: 100vh;
  min-width: 375px;
}

/* || Elements */
/* can't contain anythings */

.text--set1 {
  font-size: clamp(24px, 12.55px + 3.0543vw, 36px);
  line-height: 1.4;
  letter-spacing: 0.25px;
  font-weight: var(--FW-Semibolld);
  color: var(--Grey-500);
}

.text--set2 {
  font-size: clamp(24px, 12.55px + 3.0543vw, 36px);
  line-height: 1.4;
  letter-spacing: 0.25px;
  font-weight: var(--FW-Regular);
  color: var(--Grey-500);
}

.text--set3 {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0px;
  font-weight: var(--FW-Semibolld);
  color: var(--Grey-500);
}

.text--set4 {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: var(--FW-Regular);
  color: var(--Grey-500);
}

.text--set5 {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: var(--FW-Regular);
  color: var(--Grey-400);
}

.icon {
  width: 64px;
  height: 64px;
}

/* || Blocks */
/* can contain other blocks or elements */

.page__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
}

.page {
  margin: 16px;
  background-color: var(--White);
}

.main-content {
  grid-column: span 4;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(60px, 50.46px + 2.54vw, 74px);
  width: 100%;
}

.main-content__title-wrapper {
  display: flex;
  flex-direction: column;
  align-content: center;
  gap: 16px;
  width: clamp(316px, 121.74px + 57vw, 540px);
  height: max-content;
  text-align: center;
}

.main-content__title {
  display: flex;
  flex-direction: column;
}

.card-wrapper__grid  {
  display: grid;
  grid-template-columns: subgrid;
  gap: 32px;
}

.card-wrapper {
  grid-column: span 4;
  justify-self: center;
  width: max-content;
}

.card {
  display: flex;
  flex-direction: column;
  width: clamp(314px, 272.86px + 5.357vw, 350px);
  height: 250px;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 15px 30px -11px #83a6d280;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  height: 4px;
  width: 100%;
  background-color:rgb(151, 151, 151);
  position: absolute;
  top: 0;
  left: 0;
}

.card-1 {
  grid-column: span 4;
  justify-self: center;
}

.card-2 {
  grid-column: span 4;
  justify-self: center;
}

.card-3 {
  grid-column: span 4;
  justify-self: center;
}

.card-4 {
  grid-column: span 4;
  justify-self: center;
}

.card__icon-wrapper {
  flex-grow: 1;
  position: relative;
}

.icon {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* || Modifiers */ 
/* used to modify elements or blocks */

.--bg-cylan::before {
  background-color: var(--Cyan);
}

.--bg-red::before {
  background-color: var(--Red);
}

.--bg-orange::before {
  background-color: var(--Orange);
}

.--bg-blue::before {
  background-color: var(--Blue);
}

@media screen and (768px <= width < 1200px) {
  .card-wrapper__grid {
    column-gap: 16px;
  }

  .card-1 {
    grid-column: span 8;
  }

  .card-2 {
    grid-column: span 4;
  }

  .card-3 {
    grid-column: span 4;
  }

  .card-4 {
    grid-column: span 8;
  }
}

@media screen and (width >= 1200px) {
  .card-wrapper__grid {
    grid-template-rows: 1fr 1fr;
    column-gap: 32px;
  }

  .card-1 {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .card-2 {
    grid-column: 5 / span 4;
  }

  .card-3 {
    grid-column: 5 / span 4;
  }

  .card-4 {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    align-self: center;
  }
}