/*Reset*/
* {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

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

:root {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  cursor: default;
  line-height: 1.5;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

html,
body {
  height: 100%;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

html {
  font-size: 10px;
}

body {
  background-color: hsl(0, 0%, 98%);
  font-family: "Poppins", sans-serif;
  color: hsl(234, 12%, 34%);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  text-align: center;
  max-width: 54rem;
  margin: 8rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
header p {
  padding: 0 4rem;
}

h1 {
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.4;
}
h1 span {
  font-weight: 200;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

p {
  font-size: 1.5rem;
  color: hsl(229, 6%, 66%);
  line-height: 1.7;
}

section {
  display: flex;
  flex-flow: column wrap;
  height: 530px;
  align-content: flex-start;
  justify-content: center;
  gap: 3rem;
}

.card {
  width: 35rem;
  height: 25rem;
  background-color: #fff;
  border-radius: 0.8rem;
  padding: 3.2rem;
  padding-top: 2.8rem;
  border-top: 4px solid;
  box-shadow: 0 1.5rem 3rem rgba(131, 166, 210, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card .img-container {
  display: flex;
  align-items: flex-end;
  flex-direction: column-reverse;
  height: 100%;
}
.card .img-container img {
  max-width: 6.6rem;
  max-height: 6.6rem;
}
.card p {
  font-size: 1.3rem;
}

/*Border colors*/
.cyan {
  border-color: hsl(180, 62%, 55%);
  margin: 1px 0;
}

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

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

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

/*Responsive*/
@media screen and (max-width: 1100px) {
  .cyan {
    margin: 0;
  }
}
@media screen and (max-width: 740px) {
  section {
    height: 100%;
  }
}
@media screen and (max-width: 480px) {
  h1 {
    font-size: 2.4rem;
  }
  .card {
    max-width: 32rem;
    max-height: 23rem;
  }
  img {
    max-width: 5rem;
    max-height: 5rem;
  }
}