.portrait-blog { width: 100vw; // height: 100vh; padding: 0px 10px; position: relative; &__header { direction: rtl; width: 100%; margin-top: 80px; &--top { width: 100%; text-align: right; align-items: center; margin-top: 20px; h1 { font-size: 24px; // color : $dusk; margin-bottom: 10px; letter-spacing: -2px; } } &--bottom { align-items: center; direction: rtl; width: 100%; justify-content: space-between; h2 { font-size: 14px; // color : $dusk; margin-bottom: 5px; letter-spacing: -1px; } & div { font-size: 14px; // color : $dusk; margin-bottom: 0px; letter-spacing: -1px; font-family: IRANSansNumeral; } } } &__body { width: 100%; margin-top: 15px; &--image { width: 100%; & img { width: 100%; height: 100%; border-radius: 10px; } } &--text { margin-top: 10px; width: 100%; direction: rtl; text-align: justify !important; // color: $dusk; color: #4e4e4e; font-size: 14px; letter-spacing: -1px; font-family: numeralLight; } } } .landscape-blog { width: 100vw; padding: 0px 10px; position: relative; text-align: right; max-width: 1250px; margin: 0px auto; &__header { direction: rtl; width: 100%; margin-top: 100px; max-width: 800px; &--top { width: 100%; text-align: right; align-items: center; margin-top: 20px; h1 { font-size: 28px; // color : $dusk; margin-bottom: 10px; letter-spacing: -1px; } } &--bottom { align-items: center; direction: rtl; width: 100%; justify-content: space-between; h2 { font-size: 14px; // color : $dusk; margin-bottom: 5px; letter-spacing: -1px; } & div { font-size: 16px; // color : $dusk; margin-bottom: 5px; letter-spacing: -1px; font-family: IRANSansNumeral; } } } &__body { width: 100%; &--image { width: 100%; max-height: 300px; } &--text { margin-top: 40px; width: 100%; direction: rtl; text-align: justify; // color: $dusk; color: #4e4e4e; font-size: 18px; letter-spacing: -1px; font-family: numeralLight; } } }