scratch-www/src/views/tips/tips.scss

@import "../../colors";
@import "../../frameless";

$base-bg: $ui-white;

#view {
    background-color: $ui-gray;
    padding: 0;
}

.tips-resources {
    background-color: $ui-white;
    overflow: hidden;
}

.ttt-section {
    display: flex;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.tips-divider {
    border-top: 1px solid $ui-gray;
    width: 100%;
}

.tips-banner-image {
    max-width: calc(100% - 2rem);
}

$darken-button: rgba(0, 0, 0, .1);

.tips-button {
    margin-right: .75rem;
    background-color: $ui-blue;
    color: $ui-white;
    font-size: 1rem;
    
    &.getting-started-button {
        margin-right: 0;
        background-color: $darken-button;
    }
    
    img {
        margin-right: 1rem;
        height: 1.25rem;
        vertical-align: middle;
    }
    
    a {
        color: $ui-white;
    }
}

.purchase-button {
    img {
        margin-right: 0;
        margin-left: .75rem;
        width: 1rem;
        vertical-align: baseline;
    }
}

.tips-info-section {
    padding: 2.5rem 0;
    width: 100%;
    justify-content: space-between;
}

.tips-info-body {
    text-align: left;
}

.tips-cards-buttons {
    a {
        white-space: normal;
    }
}

img.tips-icon {
    height: 1.75rem;
}
//4 columns
@media only screen and (max-width: $mobile - 1) {

    .title-banner {
        &.masthead {
            padding-bottom: 1.25rem;

            p {
                max-width: $cols4;
            }
        }
    }
    
    .ttt-head {
        
        p {
            max-width: $cols4;
        }
    }
    
    //put the image first if in 4-column
    .tips-info-body {
        max-width: $cols4;
        text-align: center;
        
        &.tips-illustration {
            order: -1;
            img {
                width: $cols4;
            }
        }
        
        .button {
            width: 100%;
        }
    }
}

//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
    .title-banner {
        &.masthead {

            p {
                max-width: $cols6;
            }
        }
    }
    
    .ttt-head {
        p {
            max-width: $cols6;
        }
    }
    
    .tips-info-body.tips-illustration {
        order: -1;
        img {
            width: $cols4;
        }
    }

    .tips-info-body {
        max-width: $cols4;
        text-align: center;
    }
}


//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
    .title-banner {
        &.masthead {
            padding-bottom: 2rem;

            p {
                max-width: $cols6;
            }
        }
    }
    
    .ttt-head {
        p {
            max-width: $cols6;
        }
    }
    
    .tips-info-section {
        &.mod-align-top {
            align-items: flex-start;
        }
    }
    
    .tips-info-body {
        max-width: $cols4;
    }
    
    .tips-button {
        width: 100%;
    }
    
    img.mod-flow-left {
        transform: translate(-1*$cols2);
    }
}

// 12 columns
@media only screen and (min-width: $desktop) {
    .title-banner {
        &.masthead {
            padding-bottom: 1.25rem;

            p {
                max-width: $cols8;
            }
        }
    }
    
    .ttt-head {
        p {
            max-width: $cols8;
        }
    }
    
    .tips-info-section {
        &.mod-align-top {
            align-items: flex-start;
        }
    }
    
    .tips-info-body {
        max-width: $cols6;
        &.mod-narrow {
            max-width: $cols5;
        }
    }
}