.resource-dark-container{
  background:black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 900px;
  color: white;
  font-family: 'Open sans';
}

.resource-dark-container h5{
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.resource-dark-info{
  width: 33%;
  font-size: 18px;
  margin: 30px;
}

.resource-dark-info button{
  width: 200px;
  color: white;
  font-size: 18px;
  background: none;
  border: solid 3px white;
  border-radius: 30px;
  padding: 20px;
  font-weight: bold;
}

.resource-dark-info button:hover{
  color: black;
  background: white;
  cursor: pointer;
}

.resource-light-container{
  height:auto;
  background: white;
  width: 28%;
  border-radius: 20px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin: 30px;
}

.resource-hero-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
   
}

.resource-hero-image img{
  overflow: hidden;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.resource-tag{
  position: absolute;
  top:10px;
  right:10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  color: black;
  font-weight:bold;
}

.resource-title{
  color: black;
  font-weight: bold;
  font-size: 25px;
  margin: 20px 0;
}


.resource-button{
 font-size: 35px;
 height: 75px;
 width: 75px;
 background: white;
 border-radius: 50%;
 
 color: #f68d2e;
 border: solid 3px #f68d2e;
 transform: rotate(-45deg);

}

.resource-light-container:hover button{
 background: #da291c;
 border: #da291c;
 color: white;
 cursor: pointer;
}


@media (max-width: 1000px){
  .resource-dark-container{
    flex-direction: column;
    height: 100%;
}
  
  .resource-dark-info{
  width: 100%;
}

  .resource-light-container{
  height:auto;
  background: white;
  width: 90%;
}

.resource-hero-image {
  height: 200px;
  
}