.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hidden {
    display: none !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: var(--zen-blue-2);
    color: var(--white);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.btn-left_aligned {
    justify-content: start;
}

.btn-md {
    font-size: 16px;
    gap: 8px;
    padding: 10px 10px;
}

.btn-lg {
    font-size: 16px;
    gap: 8px;
    padding: 10px 18px;
}

.btn-icon-only {
    padding: 8px;
}

.btn-2xl {
    font-size: 18px;
    gap: 12px;
    padding: 16px 28px;
}

.btn-secondary-gray {
    border: 1px solid var(--gray-300);
    background-color: var(--white);
    color: var(--gray-700);
}

.btn-ghost-gray {
    background-color: transparent;
    color: var(--gray-700);
}

@media screen and (max-width: 400px) {
    .btn-2xl {
        font-size: 16px;
    }

    .btn {
        width: 100%;
    }
}

.icon {
    height: 20px;
}

.icon-lg {
    height: 20px;
}

.icon-2xl {
    height: 24px;
}

.text-sm {
    font-size: 14px;
    line-height: 1em;
}

.text-md {
    font-size: 16px;
}

.text-xl {
    font-size: 20px;
    line-height: 1.5em;
}

.display-xl {
    font-size: 60px;
    line-height: 1.2em;
    letter-spacing: -2%;
}

.mb-1 {
    margin-bottom: calc(var(--spacer) * 0.5);
}

.mb-2 {
    margin-bottom: calc(var(--spacer) * 1);
}

.mb-3 {
    margin-bottom: calc(var(--spacer) * 1.5);
}

.mb-4 {
    margin-bottom: calc(var(--spacer) * 2);
}

.mb-5 {
    margin-bottom: calc(var(--spacer) * 2.5);
}

.mb-6 {
    margin-bottom: calc(var(--spacer) * 4);
}

.mt-1 {
    margin-top: calc(var(--spacer) * 0.5);
}

.mt-2 {
    margin-top: calc(var(--spacer) * 1);
}

.mt-3 {
    margin-top: calc(var(--spacer) * 1.5);
}

.mt-4 {
    margin-top: calc(var(--spacer) * 2);
}

.mt-5 {
    margin-top: calc(var(--spacer) * 2.5);
}

.mt-6 {
    margin-top: calc(var(--spacer) * 4);
}

.pb-1 {
    padding-bottom: calc(var(--spacer) * 0.5);
}

.pb-2 {
    padding-bottom: calc(var(--spacer) * 1);
}

.pb-3 {
    padding-bottom: calc(var(--spacer) * 1.5);
}

.pb-4 {
    padding-bottom: calc(var(--spacer) * 2);
}

.pb-5 {
    padding-bottom: calc(var(--spacer) * 2.5);
}

.pb-6 {
    padding-bottom: calc(var(--spacer) * 4);
}

.pt-1 {
    padding-top: calc(var(--spacer) * 0.5);
}

.pt-2 {
    padding-top: calc(var(--spacer) * 1);
}

.pt-3 {
    padding-top: calc(var(--spacer) * 1.5);
}

.pt-4 {
    padding-top: calc(var(--spacer) * 2);
}

.pt-5 {
    padding-top: calc(var(--spacer) * 2.5);
}

.pt-6 {
    padding-top: calc(var(--spacer) * 4);
}

.px-1 {
    padding-inline: calc(var(--spacer) * 0.5);
}

.px-2 {
    padding-inline: calc(var(--spacer) * 1);
}

.px-3 {
    padding-inline: calc(var(--spacer) * 1.5);
}

.px-4 {
    padding-inline: calc(var(--spacer) * 2);
}

.px-5 {
    padding-inline: calc(var(--spacer) * 2.5);
}

.px-6 {
    padding-inline: calc(var(--spacer) * 4);
}

.bg-green-2 {
    background-color: var(--zen-green-2);
}

.bg-blue-1 {
    background-color: var(--zen-blue-1);
}
.bg-blue-2 {
    background-color: var(--zen-blue-2);
}
.bg-blue-3 {
    background-color: var(--zen-blue-3);
}

.gray-300 {
    color: var(--gray-300);
}

.gray-500 {
    color: var(--gray-500);
}

.gray-700 {
    color: var(--gray-700);
}

.gray-900 {
    color: var(--gray-900);
}

.green-2 {
    color: var(--zen-green-2);
}

.blue-1 {
    color: var(--zen-blue-1);
}

.blue-2 {
    color: var(--zen-blue-2);
}

.blue-3 {
    color: var(--zen-blue-3);
}

.white {
    color: var(--white);
}

.placeholder {
    height: 100vh;
}

.cards {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.cards > .card {
    width: calc(50% - 32px);
    min-width: 360px;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
        0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

/* SOURCE: https://css-tricks.com/line-clampin/#aa-the-fade-out-way */
.shortened-content {
    position: relative;
    height: calc(var(--line-height) * var(--max-lines));
    overflow: hidden;
}

.shortened-content::after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: var(--line-height);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

@media screen and (max-width: 700px) {
    .cards > .card {
        width: 80%;
    }
}

@media screen and (max-width: 400px) {
    .cards > .card {
        min-width: 100%;
    }
}