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

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  padding: 0;
  background: transparent;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

.relative {
  position: relative;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.min-h-screen {
  min-height: 100vh;
}

.w-full {
  width: 100%;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.flex-col {
  flex-direction: column;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

.justify-center {
  justify-content: center;
}

.gap-12 {
  gap: 3rem;
}

.gap-20 {
  gap: 5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.px-12 {
  padding-right: 3rem;
  padding-left: 3rem;
}

.italic {
  font-style: italic;
}

.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}

.bg-\[var\(--bg\)\] {
  background-color: var(--bg);
}

.text-\[\#6B584E\] {
  color: #6B584E;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:pl-\[160px\] {
    padding-left: 160px;
  }
}