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

:root {
  /* COLOR */
  --bg-card-white: hsl(0, 0%, 100%);
  --clr-h2-900: hsl(218, 44%, 22%);
  --clr-P-500: hsl(216, 15%, 48%);
  --clr-bg-body-300: hsl(212, 46.4%, 89%);

  /* FONTS */
  --font-family: "outfit";
  /* LINE HEIGHT */
  --p-line-height: 1.2;
  --h2-line-height: 1.4;

  /* FONT-SIZE */
  --h2-font-size: 22px;
  --P-ff-15px: 15px;

  /* FONT-WEIGGT */
  --h2-font-weight: 700;
  --p-font-weight: 400;

  /* LETTER-SPACING */

  --h2-letter-spacing: 0;
  --p-letter-spacing: 0.2px;

  /* PADDING */
  --card--padding-16: 16px;
  --card--padding-40: 40px;
  /* GAP */
  --gap-16: 16px;
  --gap-24: 24px;

  /* BORDER RADIUS */

  --CARD-BR-20: 20px;
  --IMAGE-BR-10: 10px;
}

body {
  background-color: var(--clr-bg-body-300);
  font-family: var(--font-family);
  font-size: var(--P-ff-15px);
  line-height: 1.5;
}

/* Composition */
.flow > * + * {
  margin-top: 1rem;
}

.text-container-gap {
  gap: 16px;
}

.card-gap-24 {
  gap: var(--gap-24);
}

/* context-container  */
.text-container-margin-r {
  margin-right: 16px;
}
.text-container-margin-L {
  margin-right: 16px;
}

/* UTILITY */

/* text styling */
.qr-title {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
}

.qr-p-lS {
  letter-spacing: var(--p-letter-spacing);
}

.qr-p-clr {
  color: var(--clr-P-500);
}

.qr-p-lH {
  line-height: var(--p-line-height);
}

/* H2 */

.h2-fS-22 {
  font-size: var(--h2-font-size);
}

.h2-fw-700 {
  font-weight: var(--h2-font-weight);
}
.h2-lH {
  line-height: var(--h2-line-height);
}
.h2-lS {
  letter-spacing: 0;
}

.h2-color {
  color: var(--clr-h2-900);
}

/* IMAGE STYLING */

.qr-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.qr-img-br-10 {
  border-radius: var(--IMAGE-BR-10);
}

/* card styling */

.card-bg-w {
  background-color: var(--bg-card-white);
}

.card-padding-16 {
  padding: var(--card--padding-16);
}

.card-padding-40 {
  padding-bottom: var(--card--padding-40);
}

.card-br-20 {
  border-radius: var(--CARD-BR-20);
}

/* BLOCK */

.card {
  width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25 25 0, hsla(0, 0%, 0%, 0.048);
}

.main-flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin-left: 27.5px;
  margin-right: 27.5px;
}

.context-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Exception */