.terms {
    hyphens: auto;
    margin: auto;
    max-width: 640px;
    text-align: justify;

    strong {
        font-weight: 600;
    }
}

.terms__title {
    font: var(--headline-large);
    margin: 0;
}

.terms__date {
    color: var(--colour-on-surface-variant);
    font: var(--title-medium);
}

.terms__subtitle {
    font: var(--title-large);
    margin: 0;
}

.home__header {
    display: flex;
    justify-content: end;
    margin: 0 auto 16px;
    max-width: 1024px;
}

.home__section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
    max-width: 1024px;

    @media (min-width: 748px) {
        align-items: center;
        display: flex;
        flex-direction: row;
        margin: 48px auto;

        &:nth-of-type(odd) {
            flex-direction: row-reverse;
        }
    }
}

.home__animated {
    animation: fade-up var(--default-transition-spatial) paused;

    &.home__animated--running {
        animation-play-state: running;
    }
}

@keyframes fade-up {
    from {
        transform: translateY(24px);
    }
}

.home__image {
    min-width: 50%;
    perspective: 1500px;
    transform-style: preserve-3d;

    img {
        border-radius: var(--large-radius);
        box-shadow:
            25px 60px 125px -25px rgba(80, 102, 144, 0.1),
            16px 40px 75px -40px rgba(0, 0, 0, 0.2);
        height: auto;
        max-width: 100%;
    }

    &:nth-of-type(odd) img {
        transform: rotateY(-25deg) rotateX(8deg);
    }

    &:nth-of-type(even) img {
        transform: rotateY(25deg) rotateX(8deg);
    }
}

.home__title {
    font: var(--headline-large);
    margin: 0 0 16px;

    strong {
        color: var(--colour-primary);
        font-weight: inherit;
    }
}

.home__description {
    color: var(--colour-on-surface-variant);
    margin-bottom: 16px;

    &:last-child {
        margin-bottom: 0;
    }
}

.testimonial {
    background-color: var(--colour-surface-container);
    border-radius: var(--large-radius);
    color: var(--colour-on-surface);
    flex: 1;
    margin: 0;
    padding: 16px;

    .testimonial__quote {
        color: var(--colour-on-surface-variant);
        margin-bottom: 16px;
    }

    .testimonial__author {
        font-weight: 600;
        margin-bottom: 0;
    }

    .testimonial__bio {
        color: var(--colour-on-surface-variant);
        margin-bottom: 0;
    }
}

.home__subtitle {
    font: var(--headline-small);
    margin: 0 0 16px;

    strong {
        color: var(--colour-primary);
        font-weight: inherit;
    }
}

.efficient__figures {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.efficient__figure,
.efficient__label {
    margin-bottom: 0;
}

.efficient__label {
    color: var(--colour-on-surface-variant);
}

.flexible__check {
    color: var(--colour-secondary);
    display: flex;
    gap: 12px;
    margin-top: 12px;

    p {
        margin-bottom: 0;
    }
}

.flexible__badge {
    background-color: var(--colour-secondary-container);
    border-radius: 50%;
    box-sizing: border-box;
    height: 24px;
    padding: 0 4px;
    width: 24px;
}

.flexible__pictures {
    display: flex;
    gap: 12px;
    min-width: 40%;
    max-width: 384px;
}

.flexible__picture {
    border-radius: var(--medium-radius);
    height: auto;
    max-width: 100%;

    &:not(:last-of-type) {
        margin-bottom: 12px;
    }
}

.closing {
    background-color: var(--colour-secondary-container);
    border-top: 8px solid var(--colour-primary);
    color: var(--colour-on-secondary-container);
    margin: 32px -16px 0;
    padding: 48px 16px;
    text-align: center;

    .closing__title {
        font: var(--headline-small);
        margin: 0 0 32px;
    }

    .closing__description {
        margin-bottom: 0;
    }

    @media (min-width: 748px) {
        .closing__description {
            margin: auto;
            max-width: 640px;
        }
    }
}

footer {
    margin: 32px auto 0;
    max-width: 640px;
}