/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
.national-info {
  position: relative;
  margin-bottom: 100px; }
  .national-info .bg-div {
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 426.5px; }
    @media screen and (max-width: 1140px) {
      .national-info .bg-div {
        right: 0; } }
  .national-info .inner-container {
    color: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-right: -45px; }
    .national-info .inner-container .text-container {
      margin-right: 70px; }
      .national-info .inner-container .text-container h2 {
        font-family: Lora;
        font-weight: 400;
        margin-bottom: 35px; }
      .national-info .inner-container .text-container .desc {
        margin-bottom: 30px; }
      .national-info .inner-container .text-container a.view-more {
        color: #ffffff;
        text-transform: uppercase;
        display: inline-block;
        width: fit-content;
        width: -moz-fit-content; }
        .national-info .inner-container .text-container a.view-more:hover {
          font-weight: 600;
          text-decoration: none; }
        .national-info .inner-container .text-container a.view-more span {
          display: inline-block;
          margin-left: 30px; }

@media screen and (max-width: 640px) {
  .national-info .inner-container {
    margin-right: 0; }
    .national-info .inner-container .text-container {
      margin-right: 0; }
      .national-info .inner-container .text-container a.view-more {
        margin-bottom: 40px; } }