@use '../variables/colors';
@use '../variables/fonts';
@use '../variables/line-height';
@use '../variables/spacing';

@use '../tools/rfs';

.support {
    max-width: 630px;
    margin: 0 auto;
    color: colors.$gray;
    font-family: fonts.$font-family-sans-serif;
    font-weight: fonts.$font-weight-medium;
    @include rfs.font-size(14px);
    line-height: line-height.$attribution;
    @include rfs.margin-top(28px);
    @include rfs.margin-bottom(28px);
    @include rfs.padding(10px);
    display: grid;
    align-items: center;
    grid-gap: 1.25rem;
    grid-template-columns: minmax(7.8125rem, 4fr) 6fr;
    .subscribe-link {
        @include rfs.font-size(16px);
        @include rfs.padding-left(10px);
        @include rfs.padding-right(10px);
        @include rfs.padding-top(6px);
        @include rfs.padding-bottom(5px);
        display: block;
        height: 40px;
        line-height: 25px;
        color: colors.$black;
        font-weight: fonts.$font-weight-bold;
        text-decoration: none;
        text-align: center;
        background-color: #ecc61b;
        border: colors.$black;
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        &:hover {
            background-color: rgba(236, 198, 27, .7);
            transition: all 0.2s linear;
        }
    }
    p {
      margin-bottom: 0;
      margin-top: 0;
      @media (max-width: 630px) {
        @include rfs.margin-top(12px);
      }
    }
    @media (max-width: 630px) {
      display: block;
    }
}