/*
clover green: #3cb043
neon green: #9bcc78
charcoal grey: #333333
smokey grey: #666666
*/

/* Styles for medium screens (tablets) */
@media only screen and (max-width: 820px) {

    .content-gutters {
        display: grid;
        min-width: 480px;
        width: 100%;
        max-width: 768px;
    }

    .two-columns {
        display: grid;
        grid-template-columns: 1fr;
    }

    .three-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .feature-right {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rounded-corners-lg {
        max-width: 680px;
    }

    .horizontal-padding-xlg {
        padding: 0px 80px;
    }

    .hide {
        display: none;
    }

    .carousel {
        grid-template-columns: repeat(auto-fit, 100%);
    }

    .carousel-item {
        width: 100%;
        max-width: 680px;
    }
}

/* Styles for small screens (phones) */
@media only screen and (max-width: 480px) {
    
    .content-gutters {
        display: grid;
        min-width: 360px;
        width: 100%;
        max-width: 480px;
    }

    .two-columns {
        display: grid;
        grid-template-columns: 1fr;
    }

    .horizontal-padding-xlg {
        padding: 0px 20px;
    }

    .rounded-corners-lg {
        max-width: 360px;
    }

    .title {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.25rem;
        font-weight: 400;
    }

    .click-here {
        font-size: .75rem;
        line-height: 1rem;
    }

    .note {
        font-size: .65rem;
    }

    .navbar-links {
        grid-auto-columns: minmax(30px, auto);
        gap: 5px;
    }

    .navbar-links p {
        font-size: .9rem;
        margin: .5rem
    }

    .social-links {
        grid-auto-columns: minmax(30px, auto);
        gap: 10px;
    }

    .logo-md {
        width: 40px;
        height: 40px;
    }

    .logo-sm {
        width: 20px;
        height: 20px;
    }
}