@font-face {
  font-family: 'Guardian Egyptian Web';
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  src: url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot");
  src: url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot?#iefix") format("embedded-opentype"), url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff") format("woff"), url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.ttf") format("truetype"), url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.svg#Guardian-Egyp-Web-Semibold") format("svg"); }

@font-face {
  font-family: 'Guardian Text Sans Web';
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src: url("https://interactive.guim.co.uk/gia/fonts/v1/fonts/TextSans-Regular.eot");
  src: url("https://interactive.guim.co.uk/gia/fonts/v1/fonts/TextSans-Regular.eot?#iefix") format("embedded-opentype"), url("https://interactive.guim.co.uk/gia/fonts/v1/fonts/TextSans-Regular.woff") format("woff"), url("https://interactive.guim.co.uk/gia/fonts/v1/fonts/TextSans-Regular.ttf") format("truetype"), url("https://interactive.guim.co.uk/gia/fonts/v1/fonts/TextSans-Regular.svg#TextSans-Regular") format("svg"); }

@font-face {
  font-family: 'Guardian Text Sans Web';
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  src: url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianTextSansWeb/GuardianTextSansWeb-Black.eot");
  src: url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianTextSansWeb/GuardianTextSansWeb-Black.eot?#iefix") format("embedded-opentype"), url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianTextSansWeb/GuardianTextSansWeb-Black.woff") format("woff"), url("https://interactive.guim.co.uk/gia/fonts/v4/GuardianTextSansWeb/GuardianTextSansWeb-Black.ttf") format("truetype"), url("https://interactive.guim.co.uk/ggia/fonts/v4/GuardianTextSansWeb/GuardianTextSansWeb-Black.svg#GuardianTextSansWeb-Black") format("svg"); }

body,
html {
  margin: 0;
  font-family: 'Guardian Egyptian Web';
  font-size: 18px;
  max-width: 400px; }

.link {
  text-decoration: none; }
  .link:hover .question {
    color: #333333; }
  .link:hover .button {
    background-color: #ff5b3a; }

.title {
  font-size: 18px;
  text-decoration: none;
  color: #333333;
  margin: 0; }

.wrapper {
  position: relative;
  border: 1px solid #eaeaea;
  padding: 7px;
  overflow: hidden; }
  .wrapper:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    width: 100%;
    background-color: #ff5b3a; }

.question {
  margin: 0;
  color: #ff5b3a;
  font-size: 18px;
  padding-bottom: 47%; }

.image {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 110%; }

.button {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 18px;
  background-color: #333333;
  background-image: url("https://interactive.guim.co.uk/atoms/2017/08/mapped-trump-russia/v/1512058111409/assets/images/arrow-right.svg");
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center center; }