/*--------------------------------------------------------------
# Superhero
--------------------------------------------------------------*/
.superhero {
    background-color: $dark-green;
    background-image: url(/img/bg/icon-tile_@2x.png);
    background-position: 50%;
    background-repeat: repeat;
    background-size: rem(200) rem(200);
    color: $white;
}

/*--------------------------------------------------------------
# Superhero Background Container
--------------------------------------------------------------*/

.superhero-bg-container {
    background-image: url(/img/bg/superhero-asbstract-pattern_@2x.png);
    background-position: -(rem(999));
    background-repeat: repeat-y;
    background-size: rem($col-2-width) auto;
    @include breakpoint(680) {
        background-position: right top;
    }
    @include breakpoint(900) {
        background-size: rem($col-3-width) auto;
    }
    @include breakpoint(1080) {
        background-size: rem($col-4-width) auto;
    }
}

/*--------------------------------------------------------------
# Superhero Layout Container
--------------------------------------------------------------*/

.superhero-layout-container {
    padding-bottom: 216 / $col-12-width * 100%;
    padding-left: 122 / $col-12-width * 100%;
    padding-right: 122 / $col-12-width * 100%;
    padding-top: 200 / $col-12-width * 100%;
    @include breakpoint(680) {
        padding-right: 292 / 768 * 100%;
    }
    @include breakpoint(768) {
        padding-right: 306 / 900 * 100%;
    }
    @include breakpoint(900) {
        padding-right: 454 / 1080 * 100%;
    }
    @include breakpoint(1080) {
        padding-right: 732 / $col-12-width * 100%;
    }
}

/*--------------------------------------------------------------
# Superhero Content
--------------------------------------------------------------*/

.superhero-content {
    @include grid-width($col-5-width);
    @include breakpoint(992) {

    }
}

/*--------------------------------------------------------------
# Slick Dots
--------------------------------------------------------------*/

.slick-dots {
    @include reset-list;
    margin-top: 10%;
    li {
        display: inline-block;
        margin: 0 rem(16) 0 0;
        button {
            font-size: 0;
            line-height: 0;
            outline: none;
            &:before {
                background-color: $white;
                border: rem(4) solid $white;
                border-radius: 100%;
                content: '';
                display: block;
                height: rem(12);
                transition: all 0.25s ease-in-out 0s;
                width: rem(12);
            }
            &:hover {
                &:before {
                    background-color: transparent;
                    cursor: pointer;
                }
            }
        }
    }
    .slick-active {
        button {
            &:before {
                background-color: transparent;
            }
        }
    }
}

/*--------------------------------------------------------------
# Value Props Grid
--------------------------------------------------------------*/

.value-props-grid {
    @include breakpoint(900) {
        display: grid;
        gap: rem(24) rem(24);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

/*--------------------------------------------------------------
# Value Props
--------------------------------------------------------------*/

.value-prop {
    border-radius: rem(8);
    margin-bottom: rem(24);
    padding: rem(24) 24 / 586 * 100% rem(24);
    &:nth-child(4) {
        margin-bottom: 0;
    }
    h2 {
        background-image: url(/img/bg/gradient-border_@2x.png);
        background-position: bottom left;
        background-repeat: no-repeat;
        background-size: rem(180) rem(16);
        padding-bottom: rem(48);
    }
    @include breakpoint(460) {
        padding: 60 / 586 * 100%;
    }
    @include breakpoint(900) {
        margin-bottom: 0;
    }
}

/*--------------------------------------------------------------
# Call to Action Link
--------------------------------------------------------------*/

.chia-cta {
    margin-top: rem(24);
    a {
        font-weight: 700;
    }
}
