@use "/src/scss/abstracts" as *;

.rich-link {
    display: grid;
    gap: $spacing-400;
    padding: $spacing-600;
    border: 1px solid rgba($black, 0.1);
    border-radius: $spacing-200;
    height: 100%;

    icon {
        color: $primary;

        ::ng-deep {
            svg {
                width: $spacing-400;
                height: $spacing-400;
            }
        }
    }

    &-header {
        display: grid;
        gap: $spacing-200;
    }

    &-body {
        color: $gray-900;

        strong {
            color: $gray-1000;
        }
    }
}

.section-spacing-top {
    padding-top: $spacing-900;
}

.featured {
    &__sidebar {
        display: grid;
        gap: $spacing-600;
        align-items: start;
    }
}

.feature {
    border: 1px solid $gray-200;
    border-radius: $border-radius-200;
    box-shadow: 0px 2px 12px 0px rgba($gray-1000, 0.1);
    display: grid;
    align-items: center;

    &__inline {
        @include tablet {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .feature__photo {
            aspect-ratio: 16 / 9;

            @include tablet {
                aspect-ratio: 4 / 3;
            }

            @include desktop-small {
                aspect-ratio: 16 / 9;
            }

            @include desktop-medium {
                aspect-ratio: 4 / 3;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    &__info {
        padding: $spacing-500 $spacing-600;
        display: grid;
        gap: $spacing-400;
        align-content: start;
    }

    &__headline {
        color: $blue-700;
        font-weight: 600;
        font-size: $type-size-400;
    }

    &__link {
        justify-self: start;
    }
}
