/* #region = GLOBAL */
html:focus-within {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  min-height: 100svh;
  text-rendering: optimizeSpeed;
  margin: 0;
  color: hsl(234, 12%, 34%);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

a:not([class]) {
  text-decoration: none;
  color: inherit;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol {
  counter-reset: custom-counter;
}
ol li {
  counter-increment: custom-counter;
}
ol li::before {
  content: counter(custom-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
textarea,
select,
button {
  font: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

/* #endregion = GLOBAL */
.u-text-preset-1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.016rem;
  max-width: 20ch;
}

.u-text-preset-2 {
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: 0.016rem;
}

.u-text-preset-3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.375rem;
}

.u-text-preset-4 {
  font-size: 0.938rem;
  letter-spacing: 0.006rem;
  max-width: 40ch;
}

.u-text-preset-5 {
  font-size: 0.813rem;
  letter-spacing: 0.006rem;
  line-height: 1.6;
  color: hsl(212, 6%, 44%);
  margin-bottom: 2rem;
  max-width: 30ch;
}

main {
  padding: max(3.5rem, 10vw) max(1.875rem, 7vw);
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  align-items: center;
}

.c-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.c-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 30rem;
}

.c-card_item {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  align-items: flex-end;
  border-radius: 0.5rem;
  box-shadow: 0 0.938rem 1.875rem -0.688rem hsla(213, 47%, 67%, 0.5);
  position: relative;
}

.c-card_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0.25rem;
  width: 100%;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.o-card_left {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.u-bg_color\:cyan::before {
  background-color: hsl(180, 62%, 55%);
}

.u-bg_color\:red::before {
  background-color: hsl(0, 78%, 62%);
}

.u-bg_color\:orange::before {
  background-color: hsl(34, 97%, 64%);
}

.u-bg_color\:blue::before {
  background-color: hsl(212, 86%, 64%);
}

@media (min-width: 768px) {
  .u-text-preset-1 {
    font-size: 2.25rem;
  }
  .u-text-preset-2 {
    font-size: 2.25rem;
  }
  .u-text-preset-4 {
    max-width: 55ch;
  }
  main {
    padding: min(6.375rem, 10vw) max(1.875rem, 7vw);
    gap: 4.625rem;
  }
  .c-cards {
    display: grid;
    grid-template: repeat(3, 1fr)/repeat(2, 1fr);
    grid-template-areas: "top top" "midLeft midRight" "bottom bottom";
    max-width: 100%;
    justify-items: center;
  }
  .c-card_item {
    width: clamp(18rem, 15rem + 10vw, 22rem);
  }
  .c-card_item:nth-child(1) {
    grid-area: top;
  }
  .c-card_item:nth-child(2) {
    grid-area: midLeft;
    justify-self: end;
  }
  .c-card_item:nth-child(3) {
    grid-area: midRight;
    justify-self: start;
  }
  .c-card_item:nth-child(4) {
    grid-area: bottom;
  }
}
@media (min-width: 1200px) {
  .c-cards {
    grid-template: repeat(2, 1fr)/repeat(3, 1fr);
    grid-template-areas: "left top right" "left bottom right";
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
  }
  .c-card_item {
    width: 100%;
    max-width: 21.875rem;
  }
  .c-card_item:nth-child(1) {
    grid-area: left;
  }
  .c-card_item:nth-child(2) {
    grid-area: top;
  }
  .c-card_item:nth-child(3) {
    grid-area: bottom;
  }
  .c-card_item:nth-child(4) {
    grid-area: right;
  }
}/*# sourceMappingURL=style.css.map */