/* START UTILITIES */
/* Add this class to a section that will be animated to reveal. */
/* Refer to section observer in `revealSections.js` */
.kyta-section {
    transition: transform 1s, opacity 1s;
}
  
.kyta-section--hidden {
    opacity: 0;
    transform: translateY(80px);
}

.section-divider--main {
    width: 100%;
    height: 1px;
    background-color: var(--Neutral-100);
}
.section-divider--secondary {
    width: 100%;
    height: 1px;
    background-color: var(--Neutral-800);
}

.section-spacing--large {
    padding: 8rem var(--mobile-default-layout-horizontal-space);
}
.section-spacing--medium {
    padding: 6.4rem var(--mobile-default-layout-horizontal-space);
}
.section-spacing--small {
    padding: 4.8rem var(--mobile-default-layout-horizontal-space);
}
.section-spacing--xs {
    padding: 3.5rem var(--mobile-default-layout-horizontal-space);
}

@media (min-width: 61.875em) {
    .section-spacing--large {
        padding: 8rem var(--desktop-default-layout-horizontal-space);
    }
    .section-spacing--medium {
        padding: 6.4rem var(--desktop-default-layout-horizontal-space);
    }
    .section-spacing--small {
        padding: 4.8rem var(--desktop-default-layout-horizontal-space);
    }
    .section-spacing--xs {
        padding: 3.5rem var(--desktop-default-layout-horizontal-space);
    }
}
/* END UTILITIES */