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

@use '../tools/rfs';

.reefer {
    max-width: 630px;
    margin: 0 auto;
    font-family: fonts.$font-family-headline;
    font-weight: fonts.$font-weight-bold;
    border-top: 1px solid colors.$black;
    border-bottom: 1px solid colors.$black;
    display: grid;
    align-items: flex-start;
    grid-gap: 1.25rem;
    grid-template-columns: minmax(7.8125rem, 1fr) 3fr;
    @include rfs.margin-top(31px);
    @include rfs.margin-bottom(31px);
    @include rfs.padding-top(21px);
    @include rfs.padding-bottom(21px);
    a {
        @include rfs.font-size(20px);
        color: colors.$black;
        line-height: line-height.$title;
        text-decoration: none;
        &:hover,
        &:active,
        &:focus {
          color: colors.$gray;
        }
        img {
          max-width: 100%;
        }
      }
    p.date {
        @include rfs.font-size(12px);
        color: #666666;
        font-family: fonts.$font-family-sans-serif;
        margin: spacing.$size-n1 0;
        line-height: line-height.$attribution;
    }
}