$card-padding: 2rem;

.card {
  background-color: white;
  border: 1px solid #e6e6e6;
  //border-bottom: 1px solid #bdbdbd;
  border-radius: 1rem;
  box-shadow: 0px 0px 10px 0 rgba(233, 233, 233, 0.6);
  margin: 0.5rem;
  overflow: hidden;

  .card-body {
    padding: calc($card-padding/2) $card-padding;

    &>.datalist,
    &>.list
     {
      margin-left: calc($card-padding * -1);
      margin-right: calc($card-padding * -1);
    }

    object {
      margin-right: -1rem;
      width: 100%;
      min-height: 1024px;
    }

    .searchbox {
      padding: 1rem;
      @include xpadding(".col", 0.25rem);
      @include xpadding("[class^='col-']", 0.25rem);
    }

    .text-block {
      @extend .paragraph;
      padding: 2rem 1rem;
    }

    .searchbox {
      background-color: #fafafa;
      border-top: 1px solid rgb(233, 233, 233);
      border-bottom: 1px solid rgb(233, 233, 233);
    }

    .title {
      text-align: center;
      padding: 1rem 0;

      .tag {
        font-size: 1rem;
      }

      .logo {
        margin: auto;
        width: 120px;
        transition: transform 0.2s ease-in;

        &:hover {
          transform: scale(1.05);
        }
      }

      .text {
        font-size: 1.8rem;
        padding: 1rem 0 0.5rem;
      }

      .subtext {
        font-size: 1rem;
        color: #7a7a7a;
      }
    }

    embed {
      padding: calc($card-padding/2) 0;
    }

    .image-block {
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
      }

      .credit {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0.4rem;
        background-color: rgba($primary-color, 0.3);
        color: white;
        font-size: 0.9rem;
        text-align: center;
        backdrop-filter: blur(2px);
      }
    }

    .text-block {
      @extend .paragraph;
      padding: calc($card-padding/2 + 1rem) 1rem;
    }

    .highlighted-block{
      background-color: rgb(255, 255, 217);
      padding: 1rem 0;
      border-top: 1px solid rgb(240, 240, 240);
      border-bottom: 1px solid rgb(240, 240, 240);
    }
  }

}

.card+.card {
  margin-top: 1rem;
}

.card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: $primary-color;
  text-align: center;
  padding: 2rem 1rem 0.5rem;
}

.card-top {
  text-align: center;
  border-bottom: 1px solid rgb($primary-color, 0.2);
  padding: 1rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  background-color: $primary-color;
  color: white;

  .title {
    font-size: 1.4rem;
  }

  .subtitle {
    font-size: 1rem;
    color: #7a7a7a;
  }
}

.card-bottom {
  background-color: $secondary-color;
  text-align: center;
  border-top: 1px solid rgb($primary-color, 0.2);
  padding: 1rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;

  .btn {
    margin: 0 0.2rem;
  }

  @include xpadding(".col", 0.25rem);
  @include xpadding("[class^='col-']", 0.25rem);

}

.card-banner {

  position: relative;
  border-bottom: 1px solid rgb($primary-color, 0.2);
  overflow: hidden;

  a {
    color: white;

    &:hover {
      color: white;
    }
  }

  .background {
    height: 150px;
    object-fit: cover;
    width: 100%;
  }

  .content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba($primary-color, 0), rgba($primary-color, 0), rgba($primary-color, 0), rgba($primary-color, 0.2), rgba(black, 0.8));

    .logo {
      text-align: center;
      padding: 1rem;

      img {
        height: 120px;
        margin-top: 8rem;
        padding: 1rem;

        &:hover {
          transform: scale(1.05);
        }

      }
    }

    .title {
      font-size: 2rem;
      color: white;
      text-shadow: 1px 2px 6px #000000;
      text-align: center;
      vertical-align: middle;
      position: absolute;
      bottom: 2rem;
      width: 100%;

      @media screen and (max-width: 420px) {
        font-size: 1.6rem;
        margin-top: 80px;
      }
    }

  }

}

.card-banner-lg {
  @extend .card-banner;

  .background {
    height: 420px;
    object-position: top;
  }
}

.card-banner-md {
  @extend .card-banner;

  .background {
    height: 240px;
  }
}