@import (reference) '../../../../components/style/themes/index.less'; @ArticleMaxWidth: 1208px; @resource-padding: 40px; @resource-padding-xs: 24px; #resources-page { article { padding: 0 @resource-padding; // Title .title-region { margin: 0 -@resource-padding; padding: 0 @resource-padding; overflow: hidden; background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ'); background-size: cover; h1 { max-width: @ArticleMaxWidth; margin: 56px auto 16px; font-size: 38px; line-height: 46px; } .markdown { max-width: @ArticleMaxWidth; margin: 0 auto 56px; font-weight: 200; font-size: 16px; line-height: 24px; } } // Content > .markdown { max-width: @ArticleMaxWidth; margin: 0 auto; > p { margin-bottom: 56px; } } h2 { margin-top: 124px; color: #314659; font-weight: lighter; font-size: 30px; line-height: 38px; &:first-child { margin-top: 88px; } } h3 { margin-top: 56px; font-weight: 400; font-size: 24px; line-height: 32px; } p { color: #697b8c; } } .resource-cards { .resource-card { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; list-style: none; border: 1px solid #e6e6e6; border-radius: 2px; cursor: pointer; transition: box-shadow 0.3s; &:hover { box-shadow: @shadow-2; } .resource-card-image { width: calc(100% + 2px); max-width: none; height: 184px; margin: -1px -1px 0; object-fit: cover; } .resource-card-badge { position: absolute; top: 8px; right: 8px; padding: 4px 8px; color: #fff; font-size: 12px; line-height: 1; background: rgba(0, 0, 0, 0.65); border-radius: 1px; box-shadow: 0 0 2px rgba(255, 255, 255, 0.2); } .resource-card-title { margin: 16px 20px 8px; color: #0d1a26; font-size: 20px; line-height: 28px; } .resource-card-description { margin: 0 20px 20px; color: #697b8c; font-size: 14px; line-height: 22px; } } } footer { margin-top: 176px; .rc-footer-container { max-width: @ArticleMaxWidth; margin: 0 auto; padding-right: 0; padding-left: 0; } } } @media only screen and (max-width: 767.99px) { #resources-page { article { padding: 0 @resource-padding-xs; // Title .title-region { margin: 0 -@resource-padding-xs; padding: 0 @resource-padding-xs; } } .ant-col { padding-top: 16px !important; padding-bottom: 16px !important; } } }