/*---opensource-------------------*/

/*----- common start -----*/


.two-col-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.project-logo {
    width: 80px;
}

.project-tag {
    font-size: 16px;
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    margin: 1px;
    border: 1px dotted #f8337d;
    line-height: 26px;
    border-radius: 5px;
}

.project-name {
  font-size: 32px;
  margin-bottom: 10px;
}

.project-box {
    font-size: 20px;
    line-height: 1.5em;
    font-family: "calluna";
    text-align: center;
}
/*----- common end -----*/

/*----- hosted start -----*/
.hosted-project {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 20px;

  line-height: 1.5em;
  font-family: "calluna";
  font-size: 20px;
  color: #343434;

  border-bottom: 1px dotted #f8337d;
}

.project-branding {
  width: 100%;
  
  border: 1px solid #f1f1f1;
  border-radius: 4px;

  padding: 20px 10px;
  margin-right: 20px;

  text-align: center;
}

.project-branding .project-name {
  font-size: 32px;
  margin-bottom: 10px;
}
/*----- hosted end -----*/

/*----- project box start -----*/

.two-col-layout .project-box {
  width: 40%;
  
  margin-bottom: 50px;
  padding: 20px 10px;
  
  border: 1px dotted #f8337d;
  border-radius: 10px;
}

.project-box .project-name {
  font-size: 32px;
  margin-bottom: 10px;
}

/*----- project box end -----*/

/*----- media start -----*/
@media screen and (max-width: 30rem) {
  .hosted-project, .two-col-layout {
    flex-direction: column;
  }

  .hosted-project .project-branding{
    margin: 0;
    margin-bottom: 20px;
  }

  .two-col-layout .project-box {
    width: auto;
  }  
}
/*----- media end -----*/