.brick {
  display: flex;
  flex-direction: column;
  background-color: var(--teal);
  color: white;
  border-radius: 8px;
  padding: 20px;
  transition: .3s ease-in-out;
  height: 100%;
}

.brick:hover {
  background-color: var(--slate);
}

.brick__title {
  font-weight: 600;
  margin: 0 40px 10px 0;
  color: inherit;
}

.brick__subline {
  font: var(--petite);
  font-weight: 600;
  margin: 0 0 10px 0;
}

.brick__media--placeholder {
  border-radius: 20px;
  width: 100%;
  aspect-ratio: 25/14;
  background-color: var(--lime);
}

.brick__media img,
.brick__media iframe {
  border-radius: 8px;
  display: block;
}

.brick__media .video-embed-field-responsive-video:after {
  display: none;
}

.brick__top {
  position: relative;
  margin: 0 0 15px 0;
}

.brick__main {
  height: 100%;
  position: relative;
}

.brick__wrap {
  height: 100%;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.brick__bookmark .flag {
  position: absolute;
  right: 0;
  top: 5px;
}

.brick__bookmark a {
  font-size: 0;
}

.brick__bookmark .flag a::before {
  position: absolute;
  right: 0;
  top: 5px;
}

.brick__bookmark .action-flag a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22' fill='none'%3E%3Cpath d='M14.5557 0.599609V21.0166L7.85254 17.5693L7.57812 17.4287L7.30371 17.5693L0.599609 21.0166V0.599609H14.5557Z' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}

.brick__bookmark .action-unflag a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22' fill='none'%3E%3Cpath d='M14.5557 0.599609V21.0166L7.85254 17.5693L7.57812 17.4287L7.30371 17.5693L0.599609 21.0166V0.599609H14.5557Z' fill='white' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}

.brick__bookmark .js-flag-message {
  display: none;
}

.flag-throbber {
  position: absolute;
  opacity: 0;
  right: 0;
}

.brick__topline {
  position: absolute;
  top: 10px;
  left: 10px;
}

.brick__keys {
  margin: 0 0 25px 0;
  font: var(--petite);
  @media (min-width: 760px) {
    margin: 0 0 50px 0;
  }
}

.brick__key {
  margin: 5px 0;
}

.brick__key-icon {
  color: var(--primary);
  font-weight: 400;
  margin: 0 5px 0 0;
  width: 24px;
  text-align: center;
  display: inline-block;
}

.brick__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto 0 0 0;
}