.dynamicBanner-container .dynamicBanner-content {
  width: 100%; }

.dynamicBanner-container picture {
  position: relative;
  overflow: hidden; }
  .dynamicBanner-container picture img {
    height: auto;
    object-fit: cover;
    object-position: var(--focal-point-x) var(--focal-point-y); }
  .dynamicBanner-container picture .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out; }
  .dynamicBanner-container picture .title {
    position: relative;
    top: 10%;
    text-align: center;
    margin-bottom: 0;
    color: #fff; }
    .dynamicBanner-container picture .title h1 {
      margin-bottom: 30px; }
      @media (max-width: 1024.98px) {
        .dynamicBanner-container picture .title h1 {
          font-size: 28px; } }
      @media (max-width: 768.98px) {
        .dynamicBanner-container picture .title h1 {
          font-size: 22px; } }
  .dynamicBanner-container picture .links {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    width: 100%;
    text-align: center;
    top: 10%; }
    @media (max-width: 768.98px) {
      .dynamicBanner-container picture .links {
        -ms-flex-flow: row wrap;
            flex-flow: row wrap; } }
    .dynamicBanner-container picture .links .link {
      padding: 0 10px; }
      @media (max-width: 768.98px) {
        .dynamicBanner-container picture .links .link {
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
          margin-bottom: 15px; } }
      .dynamicBanner-container picture .links .link a {
        color: #fff; }

.dynamicBanner-container .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; }