richie 2.34.1.dev38__py2.py3-none-any.whl → 2.34.1.dev44__py2.py3-none-any.whl

frontend/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -1,8 +1,8 @@
-import { defineMessages, useIntl } from 'react-intl';
-
+import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CommonDataProps } from 'types/commonDataProps';
 import { CourseGlimpseCourse } from 'components/CourseGlimpse/index';
+import { CourseOffer } from 'types/Course';
 
 const messages = defineMessages({
   dateIconAlt: {
@@ -10,8 +10,46 @@ const messages = defineMessages({
     description: 'Course date logo alternative text for screen reader users',
     id: 'components.CourseGlimpseFooter.dateIconAlt',
   },
+  enrollmentOfferIconFreeAlt: {
+    defaultMessage: 'The entire course can be completed for free.',
+    description: 'Course offers free alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconFreeAlt',
+  },
+  enrollmentOfferIconPartiallyFreeAlt: {
+    defaultMessage: 'More than half of the course is for free.',
+    description: 'Course offers partially free alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconPartiallyFreeAlt',
+  },
+  enrollmentOfferIconPaidAlt: {
+    defaultMessage: 'Course requires a payment.',
+    description: 'Course offers paid alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconPaidAlt',
+  },
+  enrollmentOfferIconSubscriptionAlt: {
+    defaultMessage: 'Course requires to be a subscriber or a paid member.',
+    description: 'Course offers subscription alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconSubscriptionAlt',
+  },
+  certificateOfferIconAlt: {
+    defaultMessage: 'The course offers a certification.',
+    description: 'Course certificate offer alternative text',
+    id: 'components.CourseGlimpseFooter.certificateOfferIconAlt',
+  },
 });
 
+const courseOfferMessages = {
+  [CourseOffer.FREE]: messages.enrollmentOfferIconFreeAlt,
+  [CourseOffer.PARTIALLY_FREE]: messages.enrollmentOfferIconPartiallyFreeAlt,
+  [CourseOffer.PAID]: messages.enrollmentOfferIconPaidAlt,
+  [CourseOffer.SUBSCRIPTION]: messages.enrollmentOfferIconSubscriptionAlt,
+};
+
+type OfferIconType =
+  | IconTypeEnum.OFFER_SUBSCRIPTION
+  | IconTypeEnum.OFFER_PAID
+  | IconTypeEnum.OFFER_PARTIALLY_FREE
+  | IconTypeEnum.OFFER_FREE;
+
 /**
  * <CourseGlimpseFooter />.
  * This is spun off from <CourseGlimpse /> to allow easier override through webpack.
@@ -20,19 +58,52 @@ export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & Com
   course,
 }) => {
   const intl = useIntl();
+  const offer = course.offer ?? CourseOffer.FREE;
+  const certificateOffer = course.certificate_offer ?? null;
+  const hasCertificateOffer = certificateOffer !== null;
+  const hasEnrollmentOffer = offer !== CourseOffer.FREE;
+  const offerIcon = `icon-offer-${offer}` as OfferIconType;
+  const offerCertificateIcon = hasCertificateOffer && IconTypeEnum.SCHOOL;
+  const offerPrice = hasEnrollmentOffer && course.price;
+
   return (
     <div className="course-glimpse-footer">
-      <div className="course-glimpse-footer__date">
-        <Icon name={IconTypeEnum.CALENDAR} title={intl.formatMessage(messages.dateIconAlt)} />
-        {course.state.text.charAt(0).toUpperCase() +
-          course.state.text.substring(1) +
-          (course.state.datetime
-            ? ` ${intl.formatDate(new Date(course.state.datetime!), {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-              })}`
-            : '')}
+      <div className="course-glimpse-footer__column course-glimpse-footer__date">
+        <Icon
+          name={IconTypeEnum.CALENDAR}
+          title={intl.formatMessage(messages.dateIconAlt)}
+          size="small"
+        />
+        <span>
+          {course.state.text.charAt(0).toUpperCase() +
+            course.state.text.substring(1) +
+            (course.state.datetime
+              ? ` ${intl.formatDate(new Date(course.state.datetime!), {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })}`
+              : '')}
+        </span>
+      </div>
+      <div className="course-glimpse-footer__column course-glimpse-footer__price">
+        {offerCertificateIcon && (
+          <Icon
+            className="offer-certificate__icon"
+            name={offerCertificateIcon}
+            title={intl.formatMessage(messages.certificateOfferIconAlt)}
+          />
+        )}
+        <Icon
+          className="offer__icon"
+          name={offerIcon}
+          title={intl.formatMessage(courseOfferMessages[offer])}
+        />
+        {offerPrice && (
+          <span className="offer__price">
+            <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
+          </span>
+        )}
       </div>
     </div>
   );

frontend/js/components/CourseGlimpse/index.spec.tsx

@@ -1,9 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter } from 'react-router';
 import { CommonDataProps } from 'types/commonDataProps';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 import { CourseStateTextEnum } from 'types';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
 import { CourseGlimpse, CourseGlimpseCourse } from '.';
 
 const renderCourseGlimpse = ({
@@ -53,6 +54,11 @@ describe('widgets/Search/components/CourseGlimpse', () => {
       text: CourseStateTextEnum.STARTING_ON,
     },
     title: 'Course 42',
+    offer: CourseOffer.PAID,
+    price: 42.0,
+    certificate_offer: CourseCertificateOffer.FREE,
+    certificate_price: null,
+    price_currency: 'EUR',
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
@@ -63,6 +69,11 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     // first text we encounter should be the title, so that screen reader users get it first
     expect(container.textContent?.indexOf('Course 42')).toBe(0);
 
+    // The course glimpse container should have the a variant class according to their offers
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).toHaveClass('course-glimpse--offer-paid');
+    expect(containerElement).toHaveClass('course-glimpse--offer-certificate');
+
     // The link that wraps the course glimpse should have no title as its content is explicit enough
     const link = container.querySelector('.course-glimpse__link');
     expect(link).not.toHaveAttribute('title');
@@ -73,9 +84,9 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     screen.getByLabelText('Organization');
     screen.getByText('Some Organization');
     screen.getByText('Category');
-    // Matches on 'Starting on Mar 14, 2019', date is wrapped with intl <span>
+    // Matches on 'Starting on March 14, 2019', date is wrapped with intl <span>
     screen.getByLabelText('Course date');
-    screen.getByText('Starting on Mar 14, 2019');
+    screen.getByText('Starting on March 14, 2019');
 
     // Check course logo
     const courseGlipseMedia = container.getElementsByClassName('course-glimpse__media');
@@ -97,6 +108,17 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     // The logo is rendered along with alt text "" as it is decorative and included in a link block
     expect(orgImg).toHaveAttribute('alt', '');
     expect(orgImg).toHaveAttribute('src', '/thumbs/org_small.png');
+
+    // Check certificate offer
+    within(container).getByRole('img', { name: 'The course offers a certification.' });
+
+    // Check offer information
+    const offerIcon = within(container).getByRole('img', { name: 'Course requires a payment.' });
+    const useElement = offerIcon.lastChild;
+    expect(useElement).toHaveAttribute('href', '#icon-offer-paid');
+
+    const offerPrice = offerIcon.nextSibling;
+    expect(offerPrice).toHaveTextContent('€42.00');
   });
 
   it('works when there is no call to action or datetime on the state (eg. an archived course)', () => {
@@ -115,8 +137,8 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     // Make sure the component renders and shows the state
     screen.getByRole('heading', { name: 'Course 42', level: 3 });
     const dateFormatter = Intl.DateTimeFormat('en', {
-      day: '2-digit',
-      month: 'short',
+      day: 'numeric',
+      month: 'long',
       year: 'numeric',
     });
     const formatedDatetime = dateFormatter.format(new Date(course.state.datetime!));
@@ -145,4 +167,57 @@ describe('widgets/Search/components/CourseGlimpse', () => {
       'course-glimpse__metadata--code',
     );
   });
+
+  it('does not show certificate offer if the course does not offer a certificate', () => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, certificate_offer: null },
+    });
+
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).not.toHaveClass('course-glimpse--offer-certificate');
+
+    const certificicateOfferIcon = within(container).queryByRole('img', {
+      name: 'The course offers a certification.',
+    });
+    expect(certificicateOfferIcon).not.toBeInTheDocument();
+  });
+
+  it('does show free course offer if the course has no offer', () => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, offer: null },
+    });
+
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).toHaveClass('course-glimpse--offer-free');
+
+    const offerIcon = within(container).getByRole('img', {
+      name: 'The entire course can be completed for free.',
+    });
+    const useElement = offerIcon.lastChild;
+    expect(useElement).toHaveAttribute('href', '#icon-offer-free');
+
+    // And no price is shown
+    expect(offerIcon.nextSibling).not.toBeInTheDocument();
+  });
+
+  it.each([
+    [CourseOffer.FREE, 'The entire course can be completed for free.'],
+    [CourseOffer.PARTIALLY_FREE, 'More than half of the course is for free.'],
+    [CourseOffer.PAID, 'Course requires a payment.'],
+    [CourseOffer.SUBSCRIPTION, 'Course requires to be a subscriber or a paid member.'],
+  ])('does show a specific course offer icon', (offer, altText) => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, offer },
+    });
+
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).toHaveClass(`course-glimpse--offer-${offer}`);
+
+    const offerIcon = within(container).getByRole('img', { name: altText });
+    const useElement = offerIcon.lastChild;
+    expect(useElement).toHaveAttribute('href', `#icon-offer-${offer}`);
+  });
 });

frontend/js/components/CourseGlimpse/index.tsx

@@ -1,10 +1,12 @@
 import React, { memo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import c from 'classnames';
 
 import { Nullable } from 'types/utils';
 import { CommonDataProps } from 'types/commonDataProps';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CourseState } from 'types';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
 import { CourseGlimpseFooter } from './CourseGlimpseFooter';
 import CourseLink from './CourseLink';
 
@@ -40,6 +42,11 @@ export interface CourseGlimpseCourse {
   duration?: string;
   effort?: string;
   categories?: string[];
+  certificate_offer: Nullable<CourseCertificateOffer>;
+  offer: Nullable<CourseOffer>;
+  certificate_price: Nullable<number>;
+  price: Nullable<number>;
+  price_currency: string;
 }
 
 export interface CourseGlimpseProps {
@@ -71,91 +78,100 @@ const messages = defineMessages({
 
 const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataProps) => {
   const intl = useIntl();
+  const offer = course.offer ?? CourseOffer.FREE;
+  const hasCertificateOffer = course.certificate_offer !== null;
   return (
-    <div className="course-glimpse" data-testid="course-glimpse">
-      {/* the media link is only here for mouse users, so hide it for keyboard/screen reader users.
+    <div
+      className={c('course-glimpse', `course-glimpse--offer-${offer}`, {
+        'course-glimpse--offer-certificate': hasCertificateOffer,
+      })}
+      data-testid="course-glimpse"
+    >
+      <div className="course-glimpse__body">
+        {/* the media link is only here for mouse users, so hide it for keyboard/screen reader users.
       Keyboard/sr will focus the link on the title */}
-      <div aria-hidden="true" className="course-glimpse__media">
-        <CourseLink
-          tabIndex={-1}
-          className="course-glimpse__link"
-          href={course.course_url}
-          to={course.course_route}
-        >
-          {/* alt forced to empty string because it's a decorative image */}
-          {course.cover_image ? (
-            <img
-              alt=""
-              sizes={course.cover_image.sizes}
-              src={course.cover_image.src}
-              srcSet={course.cover_image.srcset}
-            />
-          ) : (
-            <div className="course-glimpse__media__empty">
-              <FormattedMessage {...messages.cover} />
-            </div>
-          )}
-        </CourseLink>
-      </div>
-      <div className="course-glimpse__content">
-        <div className="course-glimpse__wrapper">
-          <h3 className="course-glimpse__title">
-            <CourseLink
-              className="course-glimpse__link"
-              href={course.course_url}
-              to={course.course_route}
-            >
-              <span className="course-glimpse__title-text">{course.title}</span>
-            </CourseLink>
-          </h3>
-          {course.organization.image ? (
-            <div className="course-glimpse__organization-logo">
-              {/* alt forced to empty string because the organization name is rendered after */}
+        <div aria-hidden="true" className="course-glimpse__media">
+          <CourseLink
+            tabIndex={-1}
+            className="course-glimpse__link"
+            href={course.course_url}
+            to={course.course_route}
+          >
+            {/* alt forced to empty string because it's a decorative image */}
+            {course.cover_image ? (
               <img
                 alt=""
-                sizes={course.organization.image.sizes}
-                src={course.organization.image.src}
-                srcSet={course.organization.image.srcset}
+                sizes={course.cover_image.sizes}
+                src={course.cover_image.src}
+                srcSet={course.cover_image.srcset}
               />
-            </div>
-          ) : null}
-          <div className="course-glimpse__metadata course-glimpse__metadata--organization">
-            <Icon
-              name={IconTypeEnum.ORG}
-              title={intl.formatMessage(messages.organizationIconAlt)}
-              size="small"
-            />
-            <span className="title">{course.organization.title}</span>
-          </div>
-          <div className="course-glimpse__metadata course-glimpse__metadata--code">
-            <Icon
-              name={IconTypeEnum.BARCODE}
-              title={intl.formatMessage(messages.codeIconAlt)}
-              size="small"
-            />
-            <span>{course.code || '-'}</span>
-          </div>
+            ) : (
+              <div className="course-glimpse__media__empty">
+                <FormattedMessage {...messages.cover} />
+              </div>
+            )}
+          </CourseLink>
         </div>
-        {course.icon ? (
-          <div className="course-glimpse__icon">
-            <span className="category-badge">
-              {/* alt forced to empty string because it's a decorative image */}
-              <img
-                alt=""
-                className="category-badge__icon"
-                sizes={course.icon.sizes}
-                src={course.icon.src}
-                srcSet={course.icon.srcset}
+        <div className="course-glimpse__content">
+          <div className="course-glimpse__wrapper">
+            <h3 className="course-glimpse__title">
+              <CourseLink
+                className="course-glimpse__link"
+                href={course.course_url}
+                to={course.course_route}
+              >
+                <span className="course-glimpse__title-text">{course.title}</span>
+              </CourseLink>
+            </h3>
+            {course.organization.image ? (
+              <div className="course-glimpse__organization-logo">
+                {/* alt forced to empty string because the organization name is rendered after */}
+                <img
+                  alt=""
+                  sizes={course.organization.image.sizes}
+                  src={course.organization.image.src}
+                  srcSet={course.organization.image.srcset}
+                />
+              </div>
+            ) : null}
+            <div className="course-glimpse__metadata course-glimpse__metadata--organization">
+              <Icon
+                name={IconTypeEnum.ORG}
+                title={intl.formatMessage(messages.organizationIconAlt)}
+                size="small"
               />
-              <span className="offscreen">
-                <FormattedMessage {...messages.categoryLabel} />
-              </span>
-              <span className="category-badge__title">{course.icon.title}</span>
-            </span>
+              <span className="title">{course.organization.title}</span>
+            </div>
+            <div className="course-glimpse__metadata course-glimpse__metadata--code">
+              <Icon
+                name={IconTypeEnum.BARCODE}
+                title={intl.formatMessage(messages.codeIconAlt)}
+                size="small"
+              />
+              <span>{course.code || '-'}</span>
+            </div>
           </div>
-        ) : null}
-        <CourseGlimpseFooter context={context} course={course} />
+          {course.icon ? (
+            <div className="course-glimpse__icon">
+              <span className="category-badge">
+                {/* alt forced to empty string because it's a decorative image */}
+                <img
+                  alt=""
+                  className="category-badge__icon"
+                  sizes={course.icon.sizes}
+                  src={course.icon.src}
+                  srcSet={course.icon.srcset}
+                />
+                <span className="offscreen">
+                  <FormattedMessage {...messages.categoryLabel} />
+                </span>
+                <span className="category-badge__title">{course.icon.title}</span>
+              </span>
+            </div>
+          ) : null}
+        </div>
       </div>
+      <CourseGlimpseFooter context={context} course={course} />
     </div>
   );
 };

frontend/js/components/CourseGlimpse/utils.ts

@@ -1,10 +1,16 @@
 import { IntlShape } from 'react-intl';
 import { generatePath } from 'react-router';
-import { Course as RichieCourse, isRichieCourse } from 'types/Course';
+import {
+  CourseCertificateOffer,
+  CourseOffer,
+  Course as RichieCourse,
+  isRichieCourse,
+} from 'types/Course';
 import {
   CourseListItem as JoanieCourse,
   CourseProductRelationLight,
   isCourseProductRelation,
+  ProductType,
 } from 'types/Joanie';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { CourseGlimpseCourse } from '.';
@@ -40,6 +46,20 @@ const getCourseGlimpsePropsFromCourseProductRelation = (
     product_id: courseProductRelation.product.id,
     course_route: courseRoute,
     state: courseProductRelation.product.state,
+    certificate_offer:
+      courseProductRelation.product.type === ProductType.CERTIFICATE
+        ? CourseCertificateOffer.PAID
+        : null,
+    offer: courseProductRelation.product.type === ProductType.CREDENTIAL ? CourseOffer.PAID : null,
+    certificate_price:
+      courseProductRelation.product.type === ProductType.CERTIFICATE
+        ? courseProductRelation.product.price
+        : null,
+    price:
+      courseProductRelation.product.type === ProductType.CREDENTIAL
+        ? courseProductRelation.product.price
+        : null,
+    price_currency: courseProductRelation.product.price_currency,
   };
 };
 
@@ -59,6 +79,11 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
   effort: course.effort,
   categories: course.categories,
   organizations: course.organizations,
+  price: course.price,
+  price_currency: course.price_currency,
+  certificate_offer: course.certificate_offer,
+  offer: course.offer,
+  certificate_price: course.certificate_price,
 });
 
 const getCourseGlimpsePropsFromJoanieCourse = (
@@ -91,6 +116,11 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     },
     state: course.state,
     nb_course_runs: course.course_run_ids.length,
+    price: null,
+    price_currency: 'EUR',
+    certificate_offer: null,
+    offer: null,
+    certificate_price: null,
   };
 };
 

frontend/js/components/Icon/index.tsx

@@ -64,6 +64,11 @@ export enum IconTypeEnum {
   TWITTER = 'icon-twitter',
   UNIVERSITY = 'icon-univerity',
   WARNING = 'icon-warning',
+  VIDEO_PLAY = 'icon-video-play',
+  OFFER_PAID = 'icon-offer-paid',
+  OFFER_FREE = 'icon-offer-free',
+  OFFER_PARTIALLY_FREE = 'icon-offer-partially_free',
+  OFFER_SUBSCRIPTION = 'icon-offer-subscription',
 }
 
 export const Icon = ({ name, title, className = '', size = 'medium', ...props }: Props) => {

frontend/js/types/Course.ts

@@ -3,6 +3,19 @@ import { Resource } from 'types/Resource';
 import { Nullable } from 'types/utils';
 import { CourseListItem as JoanieCourse } from 'types/Joanie';
 
+export enum CourseOffer {
+  PAID = 'paid',
+  FREE = 'free',
+  PARTIALLY_FREE = 'partially_free',
+  SUBSCRIPTION = 'subscription',
+}
+
+export enum CourseCertificateOffer {
+  PAID = 'paid',
+  FREE = 'free',
+  SUBSCRIPTION = 'subscription',
+}
+
 export interface Course extends Resource {
   absolute_url: string;
   categories: string[];
@@ -29,6 +42,11 @@ export interface Course extends Resource {
   }>;
   organizations: string[];
   state: CourseState;
+  certificate_offer: Nullable<CourseCertificateOffer>;
+  offer: Nullable<CourseOffer>;
+  certificate_price: Nullable<number>;
+  price: Nullable<number>;
+  price_currency: string;
 }
 
 export function isRichieCourse(course: Course | JoanieCourse): course is Course {

frontend/js/utils/test/factories/richie.ts

@@ -10,7 +10,7 @@ import {
   PacedCourse,
   Priority,
 } from 'types';
-import { Course } from 'types/Course';
+import { CourseCertificateOffer, Course, CourseOffer } from 'types/Course';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { factory } from './factories';
 
@@ -239,5 +239,10 @@ export const CourseLightFactory = factory<Course>(() => {
     },
     organizations: [organizationName],
     state: CourseStateFactory().one(),
+    certificate_offer: CourseCertificateOffer.FREE,
+    offer: CourseOffer.FREE,
+    certificate_price: null,
+    price: null,
+    price_currency: 'EUR',
   };
 });

frontend/scss/colors/_theme.scss

@@ -217,8 +217,8 @@ $r-theme: (
   ),
   course-glimpse: (
     card-background: r-color('white'),
-    base-shadow: 0 0 6px r-color('light-grey'),
-    base-hover-shadow: 0 0 6px r-color('battleship-grey'),
+    base-shadow: 0 0 8px #00000033,
+    base-hover-shadow: 0 0 4px #00000055,
     cta-background: r-color('battleship-grey'),
     empty-color: r-color('slate-grey'),
     icon-shadow: (
@@ -232,8 +232,15 @@ $r-theme: (
     organization-color: r-color('firebrick6'),
     code-color: r-color('battleship-grey'),
     svg-icon-fill: r-color('white'),
-    footer: $battleship-grey-scheme,
     organization-shadow: 0 0 6px r-color('light-grey'),
+    footer: $battleship-grey-scheme,
+    footer-offer-paid: $indianred3-scheme,
+    footer-offer-subscription: $indianred3-scheme,
+    footer-offer-partially_free: $indianred3-scheme,
+    footer-offer-certificate: null,
+    offer-icon-visibility: visible,
+    offer-certificate-icon-visibility: visible,
+    offer-price-visibility: visible,
   ),
   category-badges: (
     primary-item: $indianred3-scheme,

frontend/scss/components/_subheader.scss

@@ -170,6 +170,41 @@ $r-subheader-search-title-width: 19rem !default; // aligned on computed search r
       position: relative;
       padding-bottom: 56.25%; // Aspect ratio 16/9
 
+      .video-player-image {
+        img {
+          filter: brightness(0.85);
+          object-fit: cover;
+        }
+        img,
+        span {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+        }
+        span {
+          text-align: center;
+          font: 48px/1.5 sans-serif;
+          fill: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        span svg {
+          transition: 0.5s;
+          width: 85px;
+          height: 85px;
+        }
+        img:hover,
+        span:hover svg {
+          fill-opacity: 1;
+          filter: drop-shadow(3px 3px 30px rgb(0 0 0 / 0.65));
+        }
+        span svg {
+          filter: drop-shadow(3px 3px 12px rgb(0 0 0 / 0.25));
+        }
+      }
       iframe {
         height: 100%;
         position: absolute;