Card

.card {
  display: flex;
  background-color: var(--white);
}
@media print, screen and (min-width:64.0625em) {
  .card {
    width: 32%;
    height: auto;
  }
  .card:nth-of-type(n + 4) {
    margin-top: 1.5rem;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .card {
    width: 32%;
    max-width: 48%;
  }
  .card:not(:first-of-type), .card:not(:nth-of-type(n + 3)) {
    margin-left: 2%;
  }
  .card:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .card {
    width: 100%;
    max-width: 100%;
  }
  .card:nth-of-type(n + 2) {
    margin-top: 1.5rem;
  }
}
.card > .link {
  display: block;
  position: relative;
  width: 100%;
  border: .5px solid #e6e6e6;
  font-family: var(--base-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  box-shadow: var(--textbox-shadow);
  transition: all var(--ease-out-cubic) .3s;
}
.card > .link:hover, .card > .link:focus {
  background-position: 0 0;
  -webkit-font-smoothing: antialiased;
  transform: scale(1.008, 1.008);
  box-shadow: var(--textbox-hover-shadow);
  transition: all var(--ease-in-cubic) .2s;
}
.card > .link:hover .thumbnail, .card > .link:focus .thumbnail {
  transform: scale(1.03, 1.03) translate(-48%, -48%);
  transition: all var(--ease-in-out-quad) .45s .02s;
}
.card > .link > .text-container > .title {
  background: linear-gradient(transparent 94%, #00e 6%);
}
.card > .link:hover .text-container > .title, .card > .link:focus .text-container > .title {
  background: linear-gradient(transparent 95%, transparent 5%);
  transform: scale(1, 1) translate(1, 1);
  transition: all var(--ease-in-cubic) .3s;
}
.card .frame {
  display: block;
  position: relative;
  width: 100%;
  border: .5px solid #e6e6e6;
  font-family: var(--base-font);
  overflow: hidden;
  box-shadow: var(--textbox-shadow);
}
.card .img-container {
  position: relative;
  width: 100%;
  /* 画像トリミングしたい枠の幅 */
  overflow: hidden;
}
@media print, screen and (min-width:64.0625em) {
  .card .img-container {
    height: 180px;
    /* 画像トリミングしたい枠の高さ */
  }
}
@media print, screen and (max-width:64em) {
  .card .img-container {
    height: 130px;
  }
}
.card .thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: all var(--ease-out-cubic) .35s .01s;
}
.card .text-container {
  height: auto;
  -webkit-font-smoothing: antialiased;
}
@media print, screen and (min-width:48em) {
  .card .text-container {
    padding: 1.2rem 2rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .card .text-container {
    padding: 1rem 1.6rem;
  }
}
.card .text-container > .title {
  display: inline;
  background: linear-gradient(transparent 94%, #333 6%);
  font-family: var(--base-font);
  font-weight: bold;
}
@media print, screen and (min-width:64.0625em) {
  .card .text-container > .title {
    font-size: calc(var(--font-size-m2));
  }
}
@media print, screen and (max-width:64em) {
  .card .text-container > .title {
    font-size: calc(var(--font-size-m1));
  }
}
.card .text-container > .excerpt {
  margin-top: .7rem;
  line-height: 1.6;
  font-family: var(--base-font);
  color: var(--black);
}
.card .text-container .rule {
  width: 100%;
  height: 1px;
  margin-top: .5rem;
  border: none;
  background-color: #333;
}
.card .text-container .date-container {
  display: block;
  text-align: right;
  color: var(--black);
}
@media print, screen and (min-width:64.0625em) {
  .card .text-container .date-container {
    margin-top: .5rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .card .text-container .date-container {
    margin-top: .3rem;
    line-height: 1.4;
  }
}
.card .text-container .date-container > .date {
  display: inline-block;
}
@media print, screen and (max-width:47.96875em) {
  .card .text-container .date-container > .date {
    width: auto;
  }
}
.card .text-container .date-container .time {
  display: inline-block;
  width: auto;
  font-size: calc(var(--font-size-s1));
  color: var(--text-dark-color);
}
.card .text-container .tag-container {
  display: flex;
  justify-content: flex-end;
  color: var(--black);
}
@media print, screen and (min-width:48em) {
  .card .text-container .tag-container {
    margin-top: .2rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .card .text-container .tag-container {
    margin-top: .1rem;
    line-height: 1.4;
  }
}
.card .text-container .tag-container > .tag {
  display: inline-block;
  width: auto;
  font-size: calc(var(--font-size-s1));
}
.card .category-label {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #0e51a8;
  font-size: calc(var(--font-size-s1));
  color: var(--white);
  transition: all var(--ease-out-cubic) .35s .01s;
}
@media print, screen and (min-width:48em) {
  .card .category-label {
    padding: .25rem .4rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .card .category-label {
    padding: .15rem .25rem;
  }
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
.card {
    opacity: 1;
    transform: none;
  }
}