/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* global css */
body {
  font-family: "Poppins", serif;
  font-size: 15px;
}
h1 {
  font-size: 1.4em;
}
h2 {
  font-size: 1.2em;
}
h3 {
  font-size: 1.1em;
}
header {
  align-self: center;
  text-wrap: balance;
}

@media screen and (min-width: 1440px) {
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.4em;
  }
  h3 {
    font-size: 1.1em;
  }
  header {
    align-self: center;
    text-wrap: auto;
    position: relative;
    display: flex;
    justify-items: center;
    flex-direction: column;
    & p {
      margin-top: 1.5em;
      width: 60%;
    }
  }
}

/* utilities */
.color-light-gray {
  color: hsl(0, 0%, 98%);
}
.bg-light-gray {
  background-color: hsl(0, 0%, 98%);
}

.color-red {
  color: hsl(0, 78%, 62%);
}
.bg-red {
  background-color: hsl(0, 78%, 62%);
}

.color-cyan {
  color: hsl(180, 62%, 55%);
}
.bg-cyan {
  background-color: hsl(180, 62%, 55%);
}

.color-orange {
  color: hsl(34, 97%, 64%);
}
.bg-orange {
  background-color: hsl(34, 97%, 64%);
}

.color-blue {
  color: hsl(212, 86%, 64%);
}
.bg-blue {
  background-color: hsl(212, 86%, 64%);
}

.color-dark-blue {
  color: hsl(234, 12%, 34%);
}
.bg-dark-blue {
  background-color: hsl(234, 12%, 34%);
}

.color-gray-blue {
  color: hsl(229, 6%, 66%);
}
.bg-gray-blue {
  background-color: hsl(229, 6%, 66%);
}

.text-normal {
  font-size: 1em;
}
.text-sm {
  font-size: 0.5em;
}

.font-normal {
  font-weight: 400;
}
.font-thin {
  font-weight: 200;
}
.font-semibold {
  font-weight: 600;
}
.text-align-center {
  text-align: center;
}

.p-4 {
  padding: 1em;
}
.gap-4 {
  gap: 1em;
}
.gap-6 {
  gap: 1.5em;
}

.my-20 {
  margin: 5em 0;
}
.my-10 {
  margin: 4em 0;
}
.my-6 {
  margin: 3em 0;
}
.my-4 {
  margin: 2em 0;
}
.normal-line-height {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-tight {
  line-height: 0.8;
}
.h-fit {
  height: fit-content;
}
.w-fit {
  width: fit-content;
}
.b-2 {
  border: 4px solid;
}
.text-balance {
  text-wrap: balance;
}

/* composition */
.flex {
  display: flex;
  flex-direction: column;
}
.block {
  display: block;
  position: relative;
}
.inline-block {
  display: inline-block;
  position: relative;
}
.flow-gap > * + * {
  margin: 2em 0;
}

/* block */
.card {
  padding: 1.5em;
  text-align: start;
  display: flex;
  flex-direction: column;
  align-items: start;
  background: white;
  border-radius: 0.5em;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  & * {
    margin: 0;
  }
  & h2 {
    color:hsl(234, 12%, 34%);
    line-height: 0.8em;
  }
  & p {
    color:hsl(229, 6%, 66%);
    font-size: 0.9em;
    line-height: 1.5em;
    margin-block-start: 0.8em;
  }
  & img, image {
    margin-block-start: 2em;
    align-self: end;
    justify-self: end;
  }
}

.container {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  flex-grow: 1;
}

@media screen and (min-width: 1440px) {
  .container {
    display: grid;
    align-self: center;
    gap: 1.5em;
    grid-auto-flow: column;
    grid-template-columns: 3;
    grid-template-rows: 2;
  }

  .card {
    position: relative;
    padding: 2em;
    text-align: start;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 3;
    grid-template-rows: 5;
    width: 350px;
    height: 250px;
    background: white;
    border-radius: 0.5em;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    & * {
      margin: 0;
    }
    & h2 {
      color:hsl(234, 12%, 34%);
      line-height: 0.8em;
      grid-row: 1;
    }
    & p {
      color:hsl(229, 6%, 66%);
      font-size: 0.9em;
      line-height: 2em;
      grid-row: 2;
    }
    & img, image {
      grid-row: 3;
    }
  }
}

/* exceptions */
.card[color="cyan"] {
  border-top: 0.3em solid hsl(180, 62%, 55%);
}
.card[color="red"] {
  border-top: 0.3em solid hsl(0, 78%, 62%);
}
.card[color="orange"] {
  border-top: 0.3em solid hsl(34, 97%, 64%);
}
.card[color="blue"] {
  border-top: 0.3em solid hsl(212, 86%, 64%);
}

@media screen and (min-width: 1440px) {
  .card[span] {
    grid-area: span 2;
    align-self: center;
  }
  .card[align-self-end] {
    align-self: end;
  }
}