@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :after,
    :before {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:768px) {
    .section {
        padding-top: 7rem;
        padding-bottom: 7rem
    }
}

@media (min-width:640px) {
    .sm\:col-span-2 {
        grid-column: span 2/span 2
    }

    .sm\:block {
        display: block
    }

    .sm\:h-48 {
        height: 12rem
    }

    .sm\:w-48 {
        width: 12rem
    }

    .sm\:w-\[320px\] {
        width: 320px
    }

    .sm\:w-auto {
        width: auto
    }

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

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:flex-wrap {
        flex-wrap: wrap
    }

    .sm\:justify-center {
        justify-content: center
    }

    .sm\:gap-3 {
        gap: .75rem
    }

    .sm\:rounded-3xl {
        border-radius: 1.5rem
    }

    .sm\:p-10 {
        padding: 2.5rem
    }

    .sm\:p-6 {
        padding: 1.5rem
    }

    .sm\:p-8 {
        padding: 2rem
    }

    .sm\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem
    }

    .sm\:text-left {
        text-align: left
    }

    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1
    }

    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }

    .sm\:text-9xl {
        font-size: 8rem;
        line-height: 1
    }

    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

@media (min-width:768px) {
    .md\:h-20 {
        height: 5rem
    }

    .md\:h-60 {
        height: 15rem
    }

    .md\:w-60 {
        width: 15rem
    }

    .md\:w-\[340px\] {
        width: 340px
    }

    .md\:max-w-\[260px\] {
        max-width: 260px
    }

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

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

    .md\:gap-10 {
        gap: 2.5rem
    }

    .md\:p-10 {
        padding: 2.5rem
    }

    .md\:p-14 {
        padding: 3.5rem
    }

    .md\:p-16 {
        padding: 4rem
    }

    .md\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem
    }

    .md\:pt-20 {
        padding-top: 5rem
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1
    }

    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }

    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1
    }
}

@media (min-width:1024px) {
    .lg\:order-1 {
        order: 1
    }

    .lg\:order-2 {
        order: 2
    }

    .lg\:col-span-2 {
        grid-column: span 2/span 2
    }

    .lg\:col-span-3 {
        grid-column: span 3/span 3
    }

    .lg\:col-span-4 {
        grid-column: span 4/span 4
    }

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

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

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

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

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

    .lg\:items-start {
        align-items: flex-start
    }

    .lg\:gap-8 {
        gap: 2rem
    }
}