img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

a {
  text-decoration: none;
  color: white;
  width: 100%;
  height: 100%;
}

/* PADDING */
.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 2rem;
}
.p-3 {
  padding: 4rem;
}
.p-4 {
  padding: 6rem;
}
.p-x-1 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.p-x-2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-x-3 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.p-x-4 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.p-y-1 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.p-y-2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.p-y-3 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.p-y-4 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* MARGIN */
.m-1 {
  margin: 0.5rem;
}

.m-2 {
  margin: 1rem;
}
.m-3 {
  margin: 1.4rem;
}
.m-4 {
  margin: 2rem;
}
.m-5 {
  margin: 4rem;
}

.m-x-1 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.m-x-2 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.m-x-3 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.m-x-4 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.m-y-1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.m-y-2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.m-y-3 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.m-y-4 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.m-bottom-1 {
  margin-bottom: 1rem;
}

.m-bottom-2 {
  margin-bottom: 2rem;
}

.m-bottom-3 {
  margin-bottom: 4rem;
}

.m-bottom-4 {
  margin-bottom: 6rem;
}

.m-top-1 {
  margin-top: 1rem !important;
}

.m-top-2 {
  margin-top: 2rem !important;
}

.m-top-3 {
  margin-top: 4rem !important;
}
.m-top-4 {
  margin-top: 6rem !important;
}

/* LETTER SPACING */
.ls-1 {
  letter-spacing: 1px;
}

.ls-2 {
  letter-spacing: 3px;
}

.ls-3 {
  letter-spacing: 4px;
}

.ls-4 {
  letter-spacing: 6px;
}

/* FONT SIZE */
.txt-sz-1 {
  font-size: 0.8rem;
}

.txt-sz-2 {
  font-size: 1.2rem;
}

.txt-sz-3 {
  font-size: 1.8rem;
}

.txt-sz-4 {
  font-size: 2.1rem;
}

/* TEXT ALIGN */
.txt-mid {
  text-align: center;
}

.txt-left {
  text-align: left;
}

/* FONT WEIGHT */
.txt-right {
  text-align: right;
}

.f-w-1 {
  font-weight: 400;
}

.f-w-2 {
  font-weight: 600;
}

.f-w-3 {
  font-weight: 900;
}

/* DISPLAY */
.grid {
  display: grid;
}

@media (min-width: 40em) {
  .p-x-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .p-x-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .p-x-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .p-x-4 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .p-y-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .p-y-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .p-y-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .p-y-4 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .m-y-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .m-y-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .m-y-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .m-y-4 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .txt-sz-1 {
    font-size: 1rem;
  }

  .txt-sz-2 {
    font-size: 1.5rem;
  }

  .txt-sz-3 {
    font-size: 2rem;
  }

  .txt-sz-4 {
    font-size: 3rem;
  }
}