Векторная графика для начинающих: теория и практика технического дизайна — страница 26 из 31

      margin: 0;
      padding: 65px 0 0 0;
      font-size: 36px;
      font-family: Arial,sans-serif;
      color: #fff;
      text-align: left;
    }
    a.illustration div.textBlock {
      display: inline-block;
      margin: 0 2% 0 10%;
    }
    a.illustration div.object {
      display: inline-block;
      width: 244px;
      height: 342px;
      float: right;
      margin: 60px 10% 40px 0;
      background-image: url('../img/svg/object.svg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    i.adult {
      position: absolute;
      top: 325px;
      left: 30px;
      display: block;
      width: 36px;
      height: 22px;
      border: 1px solid #fff;
      background-color: rgba(0,0,0,0.15);
      border-radius: 4px;
    }
    i.adult:before {
      content: "18+";
      display: block;
      padding: 3px 0 0 0;
      font-family: Arial,sans-serif;
      font-style: normal;
      font-size: 14px;
      text-align: center;

    }
}
@media (max-width:640px) {
    a.illustration {
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      margin: 0;
      background-color: #00b856;
      background-image: url('../img/png/icons-mobile.png');
      background-repeat: no-repeat;
      background-position: center center;
      border-radius: 0;
      color: #fff;
      text-decoration: none;
      overflow: hidden;
    }
    a.illustration div.textBlock {
      display: inline-block;
      width: 260px;
      margin: 0 auto 0 calc(50% – 130px);
    }
    a.illustration h2 {
      display: block;
      width: fit-content;
      margin: 0;
      padding: 30px 0 0 0;
      font-size: 28px;
      font-family: Arial,sans-serif;
      color: #fff;
      text-align: left;
    }
    a.illustration p {
      display: block;
      max-width: 300px;
      margin-top: 10px;
      font-size: 15px;
      font-family: Arial,sans-serif;
      line-height: 1.45em;
      letter-spacing: -0.02em;
    }
    a.illustration b.button:not(:target) {
      display: block;
      width: 135px;
      margin: 0 auto 0 auto;
      padding: 8px 16px 10px 16px;
      border-radius: 100px;
      background-color: #9d249b;
      border: 2px solid #fff;
      font-family: Arial,sans-serif;
      font-size: 15px;
      text-align: center;
    }
    a.illustration div.object {
      float: none;
      display: inline-block;
      width: 244px;
      height: 342px;
      margin: 20% 20% 0 calc(50% – 122px);
      background-image: url('../img/svg/object.svg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      zoom: 85%;
    }
    i.adult {
      position: absolute;
      top:auto;
      bottom: 30px;
      left: 30px;
      display: block;
      width: 34px;
      height: 20px;
      border: 1px solid #fff;
      background-color: rgba(0,0,0,0.15);
      border-radius: 4px;
    }
    i.adult:before {
      content: "18+";
      display: block;
      padding: 3px 0 0 0;
      font-family: Arial,sans-serif;
      font-size: 13px;
      font-style: normal;
      text-align: center;
    }
}
@media (max-width:414px) and (min-width:413px) {
    a.illustration {
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      margin: 0;
      background-color: #00b856;
      background-image: url(../img/png/icons-mobile.png);
      background-repeat: no-repeat;
      background-position: bottom center;
      background-size: 100% 100%;
      border-radius: 0;
      color: #fff;
      text-decoration: none;
      overflow: hidden;
    }