1:root {
  2  --text: rgb(76, 79, 105);
  3  --subtext1: rgb(92, 95, 119);
  4  --subtext0: rgb(108, 111, 133);
  5  --base: rgb(239, 241, 245);
  6  --mantle: rgb(230, 233, 239);
  7
  8  --rosewater: rgb(220, 138, 120);
  9  --flamingo: rgb(221, 120, 120);
 10  --mauve: rgb(136, 57, 239);
 11  --peach: rgb(254, 100, 11);
 12  --blue: rgb(30, 102, 245);
 13  --lavender: rgb(114, 135, 253);
 14
 15  --primary-color: var(--lavender);
 16  --primary-color-light: color-mix(in srgb, var(--primary-color) 80%, white);
 17  --primary-color-dark: color-mix(in srgb, var(--primary-color) 90%, black);
 18
 19  --content-width: 48rem;
 20  --border-radius: 1rem;
 21}
 22
 23body {
 24  font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
 25    Arial, sans-serif;
 26  font-weight: normal;
 27
 28  background-color: var(--base);
 29  color: var(--text);
 30}
 31
 32main,
 33header {
 34  width: var(--content-width);
 35  max-width: calc(100vw - 2rem);
 36  margin: 0 auto;
 37}
 38
 39section {
 40  margin-bottom: 4rem;
 41}
 42
 43h1 {
 44  color: var(--lavender);
 45}
 46
 47h2 {
 48  color: var(--subtext1);
 49}
 50
 51a {
 52  color: var(--blue);
 53}
 54
 55strong {
 56  color: var(--primary-color-dark);
 57  font-weight: 400;
 58}
 59
 60button {
 61  transition: all 0.4s ease;
 62  cursor: pointer;
 63  background-color: var(--primary-color-light);
 64  border: none;
 65  border-radius: var(--border-radius);
 66  padding: 0.5rem 1rem;
 67  color: var(--mantle);
 68  font-weight: bold;
 69
 70  &:hover {
 71    background-color: var(--primary-color);
 72  }
 73
 74  & img {
 75    width: 1.5rem;
 76    margin-right: 1rem;
 77  }
 78}
 79
 80/* ------------------------------- */
 81
 82header {
 83  padding: 2rem 0 1rem;
 84
 85  & p:first-child {
 86    color: var(--subtext0);
 87  }
 88
 89  & h1 {
 90    color: var(--primary-color);
 91  }
 92}
 93
 94ul.list-grid {
 95  list-style-type: none;
 96  padding: 0;
 97  display: grid;
 98  gap: 2rem;
 99  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
100
101  & img.icon {
102    display: block;
103    width: 2rem;
104    margin-bottom: 1rem;
105  }
106
107  & img.logo {
108    max-width: 100%;
109    height: 50px;
110    object-fit: contain;
111  }
112
113  & button {
114    width: 100%;
115  }
116}