codevise/pageflow

@value (
  darkContentSurfaceColor, lightContentSurfaceColor,
  darkContentTextColor, lightContentTextColor
) from "pageflow-scrolled/values/colors.module.css";

@value breakpoint-sm from "pageflow-scrolled/values/breakpoints.module.css";

.hidden {
  display: none;
}

.link_item {
  display: flex;
  flex-direction: column;
  width: 45%;
  vertical-align: top;
  margin: 2% auto;
  text-decoration: none;
  transition: transform 0.3s;
  border-radius: var(--theme-content-element-box-border-radius);
  overflow: hidden;
  will-change: transform;
}

.link_item.layout_center {
  width: 29%;
}

.link_item:hover {
  transform: scale(1.05);
}

.link_item:hover .link_title {
  text-decoration: underline;
}

.link_thumbnail {
  width: auto;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 56.25%;
  position: relative;
}

.link_details {
  flex: 1;
  padding: 20px;
  color: darkContentTextColor;
  background-color: lightContentSurfaceColor;
}

.invert > .link_details {
  background-color: darkContentSurfaceColor;
  color: lightContentTextColor;
}

.link_details > .link_title {
  font-weight: bold;
  margin: 0 0 20px;
}

@media screen and breakpoint-sm {
  .link_details > .link_title {
    font-size: 1.2em;
  }
}

.link_details > p {
  width: 100%;
  white-space: normal;
  line-height: 1.3em;
  margin-bottom: 0;
}

.tooltip {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 180px;
  padding: 5px;
  margin-left: -95px;
  background-color: #444;
  color: #fff;
  opacity: 0.9;
  font-size: 13px;
  text-align: center;
  white-space: normal;
}

.tooltip > span {
  display: block;
  color: #fff;
  text-decoration: underline;
}

@media only screen and (max-width: 600px) {
  .link_item.layout_center {
    width: 45%;
  }
}

@media only screen and (max-width: 350px) {
  .link_item {
    width: 85%;
  }
  .link_item.layout_center {
    width: 85%;
  }
}