:root{
    --wand:#ACB2C3;
    --week:#8DBB8D;
    --blue:#526FAE;
    --shade:#676061;
    --red:#B10C2A;
    --black:#30303A;
    --light:#F4F3E6;
    --white:#ffffff;
  }

  body{
    background:#f7f7f4;
  }

  .blog-hero{
    background:
      linear-gradient(90deg, rgba(48,48,58,.88), rgba(48,48,58,.55)),
      url('/assets/images/hover-jpeg.webp') center/cover no-repeat;
    padding:105px 0 95px;
    position:relative;
    overflow:hidden;
  }

  .blog-hero::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:0;
    height:0;
    border-top:42px solid var(--red);
    border-left:42px solid transparent;
  }

  .blog-small{
    color:var(--wand);
    font-size:13px;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:800;
    margin-bottom:14px;
  }

  .blog-title{
    color:#fff;
    font-size:44px;
    line-height:1.12;
    font-weight:900;
    max-width:680px;
    margin-bottom:18px;
  }

  .blog-title span{
    color:var(--red);
  }

  .blog-text{
    color:rgba(255,255,255,.82);
    max-width:640px;
    font-size:16px;
    line-height:1.7;
    margin:0;
  }

  .blog-section{
    padding:75px 0;
  }

  .section-head{
    margin-bottom:38px;
  }

  .section-label{
    color:var(--red);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:900;
    margin-bottom:10px;
  }

  .section-title{
    color:var(--black);
    font-size:34px;
    font-weight:900;
    margin-bottom:12px;
  }

  .section-text{
    color:var(--shade);
    font-size:15px;
    line-height:1.7;
    max-width:720px;
    margin:0;
  }

  .blog-card{
    background:#fff;
    height:100%;
    box-shadow:0 18px 45px rgba(48,48,58,.08);
    transition:.25s ease;
    overflow:hidden;
  }

  .blog-card:hover{
    transform:translateY(-7px);
    box-shadow:0 28px 60px rgba(48,48,58,.14);
  }

  .blog-img{
    height:210px;
    background-size:cover;
    background-position:center;
    position:relative;
  }

  .blog-badge{
    position:absolute;
    left:18px;
    top:18px;
    background:var(--red);
    color:#fff;
    padding:7px 13px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .blog-content{
    padding:26px 24px 28px;
  }

  .blog-meta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    color:var(--shade);
    font-size:13px;
    margin-bottom:14px;
  }

  .blog-meta i{
    color:var(--red);
    margin-right:6px;
  }

  .blog-content h2{
    color:var(--black);
    font-size:21px;
    line-height:1.3;
    font-weight:900;
    margin-bottom:12px;
  }

  .blog-content p{
    color:var(--shade);
    font-size:14px;
    line-height:1.7;
    margin-bottom:20px;
  }

  .blog-link{
    color:var(--red);
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  .blog-link:hover{
    color:var(--black);
  }

  .blog-info{
    background:var(--black);
    color:#fff;
    padding:42px 36px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .blog-info small{
    color:var(--wand);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-weight:800;
    font-size:12px;
    margin-bottom:12px;
  }

  .blog-info h3{
    font-size:26px;
    font-weight:900;
    margin-bottom:16px;
  }

  .blog-info p{
    color:rgba(255,255,255,.76);
    font-size:15px;
    line-height:1.7;
    margin-bottom:24px;
  }

  .btn-red{
    background:var(--red);
    color:#fff;
    text-decoration:none;
    padding:14px 24px;
    font-weight:800;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.08em;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:2px solid var(--red);
    width:max-content;
  }

  .btn-red:hover{
    background:#fff;
    color:var(--red);
  }

  .tips-section{
    background:#fff;
    padding:70px 0;
  }

  .tip-box{
    background:#f7f7f4;
    padding:28px 24px;
    height:100%;
    border-left:4px solid var(--red);
  }

  .tip-box i{
    color:var(--red);
    font-size:26px;
    margin-bottom:16px;
  }

  .tip-box h3{
    font-size:19px;
    color:var(--black);
    font-weight:900;
    margin-bottom:10px;
  }

  .tip-box p{
    color:var(--shade);
    font-size:14px;
    line-height:1.7;
    margin:0;
  }

  .blog-cta{
    padding:70px 0;
    background:#f7f7f4;
  }

  .cta-box{
    background:var(--red);
    color:#fff;
    padding:46px 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    flex-wrap:wrap;
  }

  .cta-box h2{
    font-size:30px;
    font-weight:900;
    margin-bottom:10px;
  }

  .cta-box p{
    color:rgba(255,255,255,.82);
    font-size:15px;
    line-height:1.7;
    margin:0;
    max-width:660px;
  }

  .btn-white{
    background:#fff;
    color:var(--red);
    text-decoration:none;
    padding:14px 24px;
    font-weight:900;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.08em;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }

  .btn-white:hover{
    background:var(--black);
    color:#fff;
  }

  @media(max-width:991px){
    .blog-title{
      font-size:36px;
    }

    .section-title{
      font-size:28px;
    }

    .cta-box{
      align-items:flex-start;
    }
  }

  @media(max-width:576px){
    .blog-hero{
      padding:80px 0 70px;
    }

    .blog-title{
      font-size:31px;
    }

    .blog-section,
    .tips-section,
    .blog-cta{
      padding:55px 0;
    }

    .blog-img{
      height:190px;
    }

    .cta-box{
      padding:34px 26px;
    }

    .cta-box h2{
      font-size:24px;
    }
  }