.mt {
  margin-top: var(--gap);
}
.mt-sm {
  margin-top: calc(var(--gap) * 0.5);
}

.mb-sm {
  margin-bottom: calc(var(--gap) * 0.5);
}
.mt2 {
  margin-top: calc(var(--gap) * 2);
}

.mt3 {
  margin-top: calc(var(--gap) * 3);
}
.mb {
  margin-bottom: var(--gap);
}
.mb2 {
  margin-bottom: calc(var(--gap) * 2);
}
.mb3 {
  margin-bottom: calc(var(--gap) * 3);
}
.mb4 {
  margin-bottom: calc(var(--gap) * 4);
}
.ml {
  margin-left: var(--gap);
}
.ml2 {
  margin-left: calc(var(--gap) * 2);
}
.mr {
  margin-right: var(--gap);
}
.mr2 {
  margin-right: calc(var(--gap) * 2);
}

.pb {
  padding-bottom: var(--gap);
}
.pb2 {
  padding-bottom: calc(var(--gap) * 2);
}
.pt {
  padding-top: var(--gap);
}
.pt2 {
  padding-top: calc(var(--gap) * 2);
}
.pt3 {
  padding-top: calc(var(--gap) * 3);
}
.pt4 {
  padding-top: calc(var(--gap) * 4);
}
.pl {
  padding-left: var(--gap);
}
.pl2 {
  padding-left: calc(var(--gap) * 2);
}
.pr {
  padding-right: var(--gap);
}
.pr2 {
  padding-right: calc(var(--gap) * 2);
}

.text-center {
  text-align: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.container-wide {
  max-width: 1050px;
}
.pt0 {
  padding-top: 0;
}
.text-white {
  color: var(--light-text);
}

.text-lg {
  font-size: var(--lg-text);
}

.text-xl{
  font-size: var(--xl-text);
}
.text-xxl {
  font-size: var(--big-title-size);
}

.socials {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.social {
  padding-bottom: calc(var(--gap) * 1 / 3);
  display: flex;
  gap: 5px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gap {
  gap: var(--gap);
}

.yellow-text {
  color: var(--yellow-text);
}

.brown-text {
  color: var(--dark-brown);
}

.accordion{
  display: flex;
  gap: calc(var(--gap) * 0.5);

}

.accordion > * {
  flex: 1;
}
.hidden{
  opacity: 0;
  height:1px;
  padding-block:0 !important;
  margin-block:0 !important;

  overflow: hidden;
}