Image Link Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-imagelink-grid{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }
    .heading-row{
        align-items: center;
        margin-bottom: rem-calc(20);
        @include bp($lg){
            margin-bottom: rem-calc(55);
        }
    }
    .heading{
        @include fluid-type(20, 40, 375, $max-container-size);
        letter-spacing: 0.02em;
        font-weight: 300;
        margin-bottom: 0;
        strong{
            font-weight: 600;
        }
    }

    &__item{
        text-decoration: none;
        position: relative;
        border-radius: rem-calc(16);
        overflow: hidden;
        display: block;
        color: $black;
        border: 1px solid #9F9F9F;
        padding: rem-calc(8);
        margin-bottom: rem-calc(24);
        
        @include bp($lg){
            border-radius: rem-calc(32);
            padding: 8px;
            background-color: $white;
        }
        &:hover{
            .block-imagelink-grid__img-wrapper{
                picture img{
                    transform: scale(1.1);
                }
            }
            .block-imagelink-grid__heading{
                color: $orange;
            }
            .btn-arrow-only{
                background-color: $orange;
            }
        }
    }

    &__img-wrapper{
        overflow: hidden;
        position: relative;
        margin-bottom: rem-calc(16);
        padding-top: calc( calc( 210 / 398 ) * 100% );
        border-radius: rem-calc(16);
        picture img{
            transform: scale(1);
            transition: 0.3s ease transform;
        }

        @include bp($lg){
            margin-bottom: rem-calc(20);
            padding-top: calc( calc( 255 / 614 ) * 100% );
            border-radius: rem-calc(21);
        }                
    }

    &__content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: rem-calc(12);
        padding: rem-calc(0 12);

        @include bp($lg){
            margin-bottom: rem-calc(22);
            padding: rem-calc(0 22);
        }
    }
    
    &__heading{
        font-size: rem-calc(20);
        line-height: rem-calc(24);
        font-weight: 400;
        letter-spacing: 0.05em;
        padding-right: rem-calc(10);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: 0.3s ease transform;
        
        @include bp($lg){
            font-size: rem-calc(24);
            line-height: rem-calc(44);
        }
    }
    
    &.bg--primary{
        .overline,
        .heading{
            color: $white;
        }
    }    
}