html {
  font-size: 100%;
}
:root,
body {
  /* color variables */
  --primary-clr: #ca261a;
  --secondary-clr: #000;
  --tertiary-clr: #000;
  --hightlight-clr: #000;
  --dk-clr: #000000;
  --lt-clr: #ffffff;
  --gry-clr: #808080;

  /* font variables */
  --t_s-80: 0.694rem;
  --t_s-sml: 0.833rem;
  --t_s-100: 1rem;
  --t_s-h6: 1.2rem;
  --t_s-h5: 1.44rem;
  --t_s-h4: 1.728rem;
  --t_s-h3: 2.074rem;
  --t_s-h2: 2.488rem;
  --t_s-h1: 2.986rem;

  --t_s-l1: 3.583rem;
  --t_s-l2: 4.3rem;
  --t_s-l3: 5.16rem;

  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-family: sans-serif;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  background: #fff;
}

/* General */
section {
  padding: 2.5rem 3%;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main {
  max-width: 1200px;
  margin: auto;
}
.main.sml {
  max-width: 1050px;
}

.brdr-r {
  border-radius: 10px;
}

/* Content */
.content ul {
  list-style: disc;
  padding-left: 1rem;
}

/* Buttons */
.btn {
  display: block;
  width: fit-content;
  height: fit-content;
  text-decoration: none;
  padding: 0.35rem 1rem;
  border-radius: 0.5rem;
  color: #fff;
  background: #000;
  transition: 0.2s ease;
}
/* V1 */
.btn.v1 {
  color: var(--lt-clr);
  background: var(--primary-clr);
  border: 2px solid transparent;
}
.btn.v1:hover,
.btn.v1:focus {
  color: var(--lt-clr);
  background: var(--dk-clr);
}
/* V2 */
.btn.v2 {
  border: solid 2px var(--primary-clr);
  color: var(--lt-clr);
  background: var(--primary-clr);
}
.btn.v2:hover,
.btn.v2:focus {
  border: solid 2px var(--primary-clr);
  color: var(--primary-clr);
  background: var(--lt-clr);
}
/* V3 */
.btn.v3 {
  border: solid 2px transparent;
  color: var(--lt-clr);
  background: var(--dk-clr);
}
.btn.v3:hover,
.btn.v3:focus {
  border: solid 2px var(--primary-clr);
  color: var(--primary-clr);
  background: var(--lt-clr);
}

/* Links */
.link {
  transition: 0.2s ease;
}
.link.v1 {
  color: var(--dk-clr);
}
.link.v1:hover,
.link.v1:focus {
  color: var(--primary-clr);
}

/* Fonts */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
small {
  font-size: var(--t_s-sml);
}
h6,
.h6 {
  font-size: var(--t_s-h6);
}
h5,
.h5 {
  font-size: var(--t_s-h5);
}
h4,
.h4 {
  font-size: var(--t_s-h4);
}
h3,
.h3 {
  font-size: var(--t_s-h3);
}
h2,
.h2 {
  font-size: var(--t_s-h2);
}
h1,
.h1 {
  font-size: var(--t_s-h1);
}
.t_s-80 {
  font-size: var(--t_s-80);
}
.t_s-sml {
  font-size: var(--t_s-sml);
}
.t_s-100 {
  font-size: var(--t_s-100);
}
.t_s-h6 {
  font-size: var(--t_s-h6);
}
.t_s-h5 {
  font-size: var(--t_s-h5);
}
.t_s-h4 {
  font-size: var(--t_s-h4);
}
.t_s-h3 {
  font-size: var(--t_s-h3);
}
.t_s-h2 {
  font-size: var(--t_s-h2);
}
.t_s-h1 {
  font-size: var(--t_s-h1);
}
.t_s-l1 {
  font-size: var(--t_s-l1);
}
.t_s-l2 {
  font-size: var(--t_s-l2);
}
.t_s-l3 {
  font-size: var(--t_s-l3);
}

/* Text Align*/
.t_a-l {
  text-align: left;
}
.t_a-c {
  text-align: center;
}

/* Widths */
.full {
  width: 100%;
}
.half {
  width: 50%;
}
.third {
  width: 33.333%;
}
.two-thirds {
  width: 66.666%;
}
.fourth {
  width: 25%;
}
.two-fourths {
  width: 50%;
}
.three-fourths {
  width: 75%;
}

/* Spaced Width */
.spaced .half {
  width: 48%;
}
.spaced .third {
  width: 31.333%;
}
.two-thirds {
  width: 64.666%;
}
.fourth {
  width: 23%;
}
.two-fourths {
  width: 48%;
}
.three-fourths {
  width: 73%;
}

/* Flex */
.flx {
  display: flex;
}
.f_j-c {
  justify-content: center;
}
.f_j-sb {
  justify-content: space-between;
}
.f_j-fs {
  justify-content: flex-start;
}
.f_j-fe {
  justify-content: flex-end;
}
.f_a-c {
  align-items: center;
}
.f_a-sb {
  align-items: space-between;
}
.f_a-fs {
  align-items: flex-start;
}
.f_a-fe {
  align-items: flex-end;
}
.f_wrp {
  flex-wrap: wrap;
}
.f_wrp-no {
  flex-wrap: nowrap;
}
.f_col {
  flex-direction: column;
}
.f_row {
  flex-direction: row;
}

/* Paddings */
.pd_w-0 {
  padding-left: 0;
  padding-right: 0;
}
.pd_h-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.pd_t-0 {
  padding-top: 0;
}
.pd_b-0 {
  padding-bottom: 0;
}
.pd_r-0 {
  padding-right: 0;
}
.pd_l-0 {
  padding-left: 0;
}

.pd_w-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.pd_h-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pd_t-10 {
  padding-top: 10px;
}
.pd_b-10 {
  padding-bottom: 10px;
}
.pd_r-10 {
  padding-right: 10px;
}
.pd_l-10 {
  padding-left: 10px;
}

.pd_w-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pd_h-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pd_t-20 {
  padding-top: 20px;
}
.pd_b-20 {
  padding-bottom: 20px;
}
.pd_r-20 {
  padding-right: 20px;
}
.pd_l-20 {
  padding-left: 20px;
}

.pd_w-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.pd_h-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.pd_t-30 {
  padding-top: 30px;
}
.pd_b-30 {
  padding-bottom: 30px;
}
.pd_r-30 {
  padding-right: 30px;
}
.pd_l-30 {
  padding-left: 30px;
}

/* Margin */
.mrg_w-0 {
  margin-left: 0;
  margin-right: 0;
}
.mrg_h-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.mrg_t-0 {
  margin-top: 0;
}
.mrg_b-0 {
  margin-bottom: 0;
}
.mrg_r-0 {
  margin-right: 0;
}
.mrg_l-0 {
  margin-left: 0;
}

.mrg_w-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mrg_h-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mrg_t-10 {
  margin-top: 10px;
}
.mrg_b-10 {
  margin-bottom: 10px;
}
.mrg_r-10 {
  margin-right: 10px;
}
.mrg_l-10 {
  margin-left: 10px;
}

.mrg_w-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mrg_h-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mrg_t-20 {
  margin-top: 20px;
}
.mrg_b-20 {
  margin-bottom: 20px;
}
.mrg_r-20 {
  margin-right: 20px;
}
.mrg_l-20 {
  margin-left: 20px;
}

.mrg_w-30 {
  margin-left: 30px;
  margin-right: 30px;
}
.mrg_h-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.mrg_t-30 {
  margin-top: 30px;
}
.mrg_b-30 {
  margin-bottom: 30px;
}
.mrg_r-30 {
  margin-right: 30px;
}
.mrg_l-30 {
  margin-left: 30px;
}

/* Responsive */
@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 800px) {
  section {
    padding: 5%;
  }
  .flx.f_wrp .half {
    width: 100%;
  }
  .flx.f_wrp .half:last-of-type {
    margin-top: 15px;
  }
  .flx.f_wrp .fourth {
    width: 50%;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 650px) {
  .flx.f_wrp .fourth {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
}