@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto-Light";
  src: url("Roboto/Roboto-Light.ttf") format("truetype");
}

html body {
  all: unset;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: repeat(21,calc(100vw / 21));
  grid-template-rows: calc(100vw / 21);
  grid-auto-rows: calc(100vw / 21);
  grid-auto-flow: row dense;
}

.main-content {
  grid-row: 6/49;
  grid-column: 4/19;
  background-color: #005555;
  padding: calc(50vw/21);
}

.heading {
  grid-row: 2/6;
  grid-column: 2/21;
  background-image: url("mpib-logo.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: calc(100vw / 21) calc(100vw / 21);
}

h3, .feed-title a {
        font-family: "Roboto", Verdana, Tahoma;
        color: white;
        text-decoration: none;
}

.feed-item-title a  {
  display: inline-block;
  font-family: "Roboto-Light";
  text-decoration: none;
  color: white;
  margin-left: calc(100vw / 21);
}

.feed-item-desc {
  display: inline-block;
  font-family: "Roboto-Light";
  text-decoration: none;
  color: white;
  margin-left: calc(200vw / 21);
}

.main-content div:last-child {
  visibility: hidden;
}
