/* style.css */

/* -------------------------------------------------------------------------- */
/*                               Root Variables                               */
/* -------------------------------------------------------------------------- */
:root {
    --primary-color: #0A84FF; /* Vibrant Blue */
    --primary-color-dark: #0056b3;
    --primary-color-light: #66b5ff;

    --accent-color-orange: #FF9F0A;
    --accent-color-green: #30D158;
    --accent-color-purple: #BF5AF2; /* Analogous accent */

    --neutral-black: #000000;
    --neutral-dark-gray: #1c1c1e;
    --neutral-medium-gray: #636366; /* Adjusted for better contrast on light bg */
    --neutral-light-gray: #f2f2f7;
    --neutral-very-light-gray: #f9f9f9;
    --neutral-white: #ffffff;

    --text-color-dark: var(--neutral-dark-gray);
    --text-color-light: var(--neutral-white);
    --text-color-medium: var(--neutral-medium-gray);

    --background-body: var(--neutral-white);
    --background-light-section: var(--neutral-light-gray);
    --background-dark-section: var(--neutral-dark-gray);
    --card-background: var(--neutral-white);

    --brutalist-border-style: 2px solid var(--neutral-black);
    --brutalist-shadow-style: 4px 4px 0px var(--neutral-black);
    --brutalist-shadow-style-hover: 6px 6px 0px var(--primary-color-dark);
    --brutalist-shadow-active: 2px 2px 0px var(--neutral-black);


    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Lato', sans-serif;

    --navbar-height: 3.25rem; /* Default Bulma navbar height */
    --section-padding-vertical: 4rem;
    --section-padding-horizontal: 1.5rem;

    --border-radius-sharp: 0;
    --border-radius-soft: 4px; /* For elements that need slight rounding */
}

/* -------------------------------------------------------------------------- */
/*                               Global Styles                                */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--background-body);
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    color: var(--text-color-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from AOS or skewed elements */
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-heading);
    color: var(--text-color-dark);
    font-weight: 700; /* Roboto bold/black */
}
.title { text-shadow: 1px 1px 1px rgba(0,0,0,0.1); }
.subtitle { color: var(--text-color-medium); }


a {
    color: var(--primary-color);
    transition: color 0.3s ease, transform 0.2s ease;
}

a:hover {
    color: var(--primary-color-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*Ensure main container has enough space for fixed navbar */
.main-container {
    padding-top: var(--navbar-height); /* For fixed navbar */
}


/* -------------------------------------------------------------------------- */
/*                                Bulma Overrides & Enhancements              */
/* -------------------------------------------------------------------------- */
.section {
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
}

.section.is-medium {
    padding: calc(var(--section-padding-vertical) * 1.5) var(--section-padding-horizontal);
}

.container {
    /* Brutalist approach: often full width or clearly defined blocks */
}

/* General Button Styles (Brutalist) */
.button {
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: var(--border-radius-sharp);
    border: var(--brutalist-border-style);
    box-shadow: var(--brutalist-shadow-style);
    transition: all 0.15s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75em 1.5em;
    background-color: var(--neutral-light-gray);
    color: var(--text-color-dark);
}

.button:hover {
    box-shadow: var(--brutalist-shadow-style-hover);
    transform: translate(-2px, -2px);
    border-color: var(--primary-color-dark); /* Match hover shadow if needed */
}

.button:active, .button.is-active {
    box-shadow: var(--brutalist-shadow-active);
    transform: translate(2px, 2px);
}

.button.is-primary {
    background-color: var(--primary-color);
    color: var(--neutral-white);
    border-color: var(--neutral-black); /* Or var(--primary-color-dark) for tonal */
}
.button.is-primary:hover {
    background-color: var(--primary-color-dark);
    color: var(--neutral-white);
    border-color: var(--neutral-black);
}

.button.is-primary.is-light { /* For contact button in nav */
    background-color: var(--primary-color-light);
    color: var(--primary-color-dark);
    border-color: var(--primary-color);
    box-shadow: 2px 2px 0px var(--primary-color);
}
.button.is-primary.is-light:hover {
    background-color: var(--primary-color);
    color: var(--neutral-white);
    box-shadow: 3px 3px 0px var(--primary-color-dark);
    transform: translate(-1px, -1px);
}


/* Input Fields (Brutalist) */
.input, .textarea {
    font-family: var(--font-body);
    border-radius: var(--border-radius-sharp);
    border: var(--brutalist-border-style);
    box-shadow: none; /* Remove Bulma's default */
    padding: 0.75em 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused,
.input:active, .textarea:active,
.input.is-active, .textarea.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 10, 132, 255), 0.25); /* Create --primary-color-rgb if needed */
}


/* Card Base Styles */
.card {
    background-color: var(--card-background);
    border: var(--brutalist-border-style);
    box-shadow: var(--brutalist-shadow-style);
    border-radius: var(--border-radius-sharp);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%; /* Make cards in columns same height */
    display: flex;
    flex-direction: column;
}
.card:hover {
    box-shadow: var(--brutalist-shadow-style-hover);
    transform: translateY(-3px) translateX(-3px);
}
.card .card-header-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-color-dark);
    border-bottom: var(--brutalist-border-style);
    padding: 0.75rem 1rem;
}
.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows footer to stick to bottom */
}
.card .card-footer {
    border-top: var(--brutalist-border-style);
    padding: 0;
}
.card .card-footer-item {
    font-family: var(--font-heading);
    text-transform: uppercase;
    padding: 1rem;
    border-radius: 0; /* Sharp */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.card .card-footer-item:not(:last-child) {
    border-right: var(--brutalist-border-style);
}
.card .card-footer-item:hover {
    background-color: var(--primary-color);
    color: var(--neutral-white);
}


/* Card Images */
.card .card-image {
    border-bottom: var(--brutalist-border-style); /* If image is at the top */
    overflow: hidden; /* Important for images inside */
}
.card .card-image figure {
    margin: 0; /* Reset Bulma figure margin if any */
    height: 200px; /* Default fixed height, can be overridden by Bulma aspect ratio classes */
}
.card .card-image figure.is-4by3,
.card .card-image figure.is-1by1,
.card .card-image figure.is-16by9 {
    height: auto; /* Let Bulma's aspect ratio work */
}

.card .card-image figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0; /* Ensure sharp corners if image touches edge */
}

/* Utility for centered content in cards where applicable */
.card.has-text-centered-content .card-content,
.card.has-text-centered-content .card-header .card-header-title {
    text-align: center;
    justify-content: center; /* For header title if it's a flex item */
}


/* -------------------------------------------------------------------------- */
/*                                  Navigation                                */
/* -------------------------------------------------------------------------- */
.header .navbar.is-fixed-top {
    border-bottom: var(--brutalist-border-style);
    box-shadow: 0 2px 0px var(--neutral-black); /* Subtle bottom shadow */
    background-color: var(--neutral-white);
}
.navbar-item img {
    max-height: 2.5rem; /* Adjust logo size */
}
.navbar-item, .navbar-link {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color-dark);
    padding: 0.5rem 1rem;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: var(--neutral-light-gray) !important; /* important to override Bulma */
    color: var(--primary-color) !important;
}
.navbar-burger {
    color: var(--text-color-dark);
}
.navbar-burger:hover {
    background-color: var(--neutral-light-gray);
}
.navbar-menu {
    border-top: var(--brutalist-border-style); /* For mobile */
    box-shadow: none;
}
@media screen and (min-width: 1024px) {
    .navbar-menu {
        border-top: none;
    }
}


/* -------------------------------------------------------------------------- */
/*                                 Hero Section                               */
/* -------------------------------------------------------------------------- */
#hero.hero {
    /* background-attachment: fixed; Already set in HTML, good for parallax */
    position: relative; /* For pseudo-elements if needed for skewed effect */
}
#hero .hero-body {
    padding: 4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .title.is-1 {
    font-size: 3.5rem;
    font-weight: 900; /* Roboto Black */
    margin-bottom: 1rem;
    color: var(--neutral-white) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
#hero .subtitle.is-4 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--neutral-white) !important;
    font-weight: 400; /* Lato Regular */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
#hero .button.is-primary.is-large {
    padding: 1em 2em;
    font-size: 1.25rem;
}

/* Skewed element example for hero (subtle) */
/*
#hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--background-body);
    clip-path: polygon(0 100%, 100% 20%, 100% 100%);
    z-index: 1;
}
*/

/* -------------------------------------------------------------------------- */
/*                            General Section Title                           */
/* -------------------------------------------------------------------------- */
.section-title {
    font-size: 2.5rem;
    font-weight: 900; /* Roboto Black */
    margin-bottom: 3rem;
    color: var(--text-color-dark);
    position: relative;
    display: inline-block; /* For centering and pseudo element */
    padding-bottom: 0.5rem;
}
.section-title::after { /* Brutalist underline */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px; /* Adjust position */
    width: 60px;
    height: 5px;
    background-color: var(--primary-color);
    box-shadow: var(--brutalist-shadow-style); /* Shadow for the underline itself */
}


/* -------------------------------------------------------------------------- */
/*                             Our Process Section                            */
/* -------------------------------------------------------------------------- */
#nuestro-proceso .process-card .card-content {
    text-align: center;
}
#nuestro-proceso .process-card .title.is-4 {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
}


/* -------------------------------------------------------------------------- */
/*                               Webinars Section                             */
/* -------------------------------------------------------------------------- */
#webinars.has-background-light {
    background-color: var(--background-light-section);
}
#webinars .card .card-image figure { /* Ensure consistent height for webinar images */
    height: 220px;
}

/* -------------------------------------------------------------------------- */
/*                             Instructors Section                            */
/* -------------------------------------------------------------------------- */
.instructor-card .card-image {
    border-bottom: none; /* No border if image is above content */
}
.instructor-card .card-image figure.is-1by1 {
    width: 150px; /* Control size of rounded image */
    height: 150px;
    margin: 0 auto; /* Center the figure */
}
.instructor-card .card-image img.is-rounded {
    border: 3px solid var(--neutral-white);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15), var(--brutalist-shadow-style); /* Combine soft shadow with brutalist */
}
.instructor-card .card-content {
    text-align: center;
}
.instructor-card .title.is-4 {
    margin-bottom: 0.25rem;
}
.instructor-card .subtitle.is-6 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                               Pricing Section                              */
/* -------------------------------------------------------------------------- */
#precios.has-background-light {
    background-color: var(--background-light-section);
}
.pricing-card .card-header-title {
    font-size: 1.5rem;
    font-weight: 900;
}
.pricing-card .title.is-1 {
    font-size: 3rem;
    color: var(--primary-color);
    margin: 1rem 0;
}
.pricing-card ul {
    list-style: none;
    margin: 1.5rem auto;
    padding-left: 0;
    max-width: 250px; /* Control width of list */
}
.pricing-card ul li {
    padding: 0.5em 0;
    border-bottom: 1px solid var(--neutral-light-gray);
}
.pricing-card ul li:last-child {
    border-bottom: none;
}
.pricing-card.is-featured {
    border: 2px solid var(--primary-color);
    box-shadow: 6px 6px 0px var(--primary-color);
    transform: scale(1.05); /* Make it stand out */
}
.pricing-card.is-featured:hover {
    transform: scale(1.05) translateY(-3px) translateX(-3px); /* Keep scale on hover */
    box-shadow: 8px 8px 0px var(--primary-color-dark);
}
.pricing-card.is-featured .card-header-title {
    background-color: var(--primary-color); /* From HTML inline style */
    color: var(--neutral-white);
    border-color: var(--neutral-black);
}


/* -------------------------------------------------------------------------- */
/*                             Accolades Section                              */
/* -------------------------------------------------------------------------- */
.testimonial-box {
    background-color: var(--neutral-light-gray);
    border: var(--brutalist-border-style);
    padding: 1.5rem;
    border-radius: var(--border-radius-sharp);
    margin-bottom: 1.5rem;
}
.testimonial-box em {
    color: var(--primary-color);
    font-weight: bold;
}
.stat-widget {
    padding: 1.5rem;
    text-align: center;
    background-color: var(--card-background);
    border: var(--brutalist-border-style);
    margin-bottom: 1rem;
}
.stat-widget .title.is-1 {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.stat-widget .subtitle.is-5 {
    color: var(--text-color-medium);
    font-weight: 700;
}
.company-logos img {
    max-height: 50px; /* Control logo size */
    width: auto;
    margin: 0.5rem auto; /* Center logos */
    filter: grayscale(1); /* Brutalist: often monochrome */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.company-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/*                           Sustainability Section                           */
/* -------------------------------------------------------------------------- */
#sostenibilidad.has-background-light {
    background-color: var(--background-light-section);
}
#sostenibilidad figure img {
    border: var(--brutalist-border-style);
    box-shadow: var(--brutalist-shadow-style);
}

/* -------------------------------------------------------------------------- */
/*                         External Resources Section                         */
/* -------------------------------------------------------------------------- */
.resource-card .card-content .title.is-5 a {
    color: var(--primary-color);
    text-decoration: none;
}
.resource-card .card-content .title.is-5 a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/*                             Contact Teaser Section                         */
/* -------------------------------------------------------------------------- */
#contacto-teaser {
    /* background-attachment: fixed; for parallax */
}
#contacto-teaser .title.is-2,
#contacto-teaser .subtitle.is-5 {
    color: var(--neutral-white) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
#contacto-teaser .button.is-primary.is-large {
    font-size: 1.25rem;
}


/* -------------------------------------------------------------------------- */
/*                                 FAQ Section                                */
/* -------------------------------------------------------------------------- */
.faq-item {
    margin-bottom: 0.5rem; /* Less space for brutalist blockiness */
    border: var(--brutalist-border-style);
    border-radius: var(--border-radius-sharp); /* Sharp corners */
}
.faq-question {
    font-family: var(--font-heading);
    font-weight: 700;
    width: 100%;
    text-align: left;
    padding: 1rem 1.5rem;
    background-color: var(--neutral-very-light-gray);
    color: var(--text-color-dark);
    border: none; /* Remove button default border */
    border-radius: 0;
    box-shadow: none; /* No shadow for question button itself */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question:hover {
    background-color: var(--neutral-light-gray);
    color: var(--primary-color);
}
.faq-question .icon i {
    transition: transform 0.3s ease;
}
.faq-question.is-active .icon i {
    transform: rotate(45deg);
}
.faq-answer {
    padding: 0 1.5rem; /* Initially no padding, will be set on open */
    background-color: var(--neutral-white);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    border-top: none; /* No top border if question has bottom border */
}
.faq-answer.is-open {
    padding: 1.5rem; /* Padding when open */
    border-top: 1px dashed var(--neutral-medium-gray); /* Separator line */
    /* max-height will be set by JS to scrollHeight */
}


/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
.footer {
    background-color: var(--neutral-dark-gray);
    color: var(--neutral-light-gray);
    padding: 3rem 1.5rem 2rem; /* Less bottom padding */
    border-top: 5px solid var(--neutral-black); /* Strong top border */
}
.footer .title.is-5 {
    color: var(--neutral-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}
.footer p, .footer ul li {
    color: var(--neutral-medium-gray); /* Lighter gray for footer text */
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.footer a {
    color: var(--primary-color-light); /* Lighter primary for dark bg */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.footer a:hover {
    color: var(--neutral-white);
    text-decoration: underline;
    text-decoration-color: var(--accent-color-orange);
}
.footer hr {
    background-color: var(--neutral-medium-gray);
    height: 1px;
    margin: 2rem 0;
}
.footer .content.has-text-centered p {
    color: var(--neutral-medium-gray);
    font-size: 0.9rem;
}

/* -------------------------------------------------------------------------- */
/*                              Other Page Styles                             */
/* -------------------------------------------------------------------------- */

/* For privacy.html, terms.html */
.static-page-content {
    padding-top: calc(var(--navbar-height) + var(--section-padding-vertical));
    padding-bottom: var(--section-padding-vertical);
    min-height: calc(100vh - var(--navbar-height) - 150px); /* Approx footer height */
}
.static-page-content .container {
    max-width: 800px; /* Content width */
}
.static-page-content h1, .static-page-content h2 {
    font-family: var(--font-heading);
    color: var(--text-color-dark);
    margin-bottom: 1.5rem;
    font-weight: 900;
}
.static-page-content p, .static-page-content ul, .static-page-content li {
    font-family: var(--font-body);
    color: var(--text-color-dark);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.static-page-content ul {
    padding-left: 1.5rem;
    list-style: disc;
}

/* For success.html */
body.success-page {
    background-color: var(--neutral-light-gray);
    font-family: var(--font-body);
    padding-top: 0; /* Override main-container padding-top */
}
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}
.success-page-container .card {
    background-color: var(--neutral-white);
    padding: 2.5rem 3.5rem;
    border: var(--brutalist-border-style);
    box-shadow: var(--brutalist-shadow-style);
    max-width: 550px;
    border-radius: var(--border-radius-sharp);
}
.success-page-container .card h1 {
    font-family: var(--font-heading);
    color: var(--accent-color-green);
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1rem;
}
.success-page-container .card p {
    color: var(--text-color-dark);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.success-page-container .card .button {
    margin-top: 1rem;
    font-size: 1rem;
}


/* Read More Link Style */
.read-more-link {
  font-family: var(--font-heading);
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  position: relative;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent; /* Placeholder for hover effect */
  transition: border-color 0.3s ease, color 0.3s ease;
}
.read-more-link:hover {
  color: var(--primary-color-dark);
  border-bottom-color: var(--accent-color-orange);
}
.read-more-link::after { /* Optional: add an arrow or icon */
  /* content: ' →'; */
}


/* -------------------------------------------------------------------------- */
/*                        Parallax & Animation Support                        */
/* -------------------------------------------------------------------------- */
/* Basic parallax for backgrounds set with background-attachment: fixed in HTML */
[style*="background-attachment: fixed"] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* AOS animations will provide element-specific 등장 animations */
/* Ensure AOS animations don't cause layout shifts by setting initial opacity for some common patterns */
[data-aos] {
    /* opacity: 0; */ /* AOS handles this, but can be set for pre-JS */
    /* transition-property: transform, opacity; */ /* AOS defaults */
}

/* Skewed grid element - example for a section background. Use with caution. */
.section-skewed-background {
    position: relative;
    z-index: 1;
}
.section-skewed-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-color-purple); /* Choose a color */
    opacity: 0.08; /* Very subtle */
    transform: skewY(-3deg); /* The skew angle */
    z-index: -1;
    border-bottom: var(--brutalist-border-style);
    border-top: var(--brutalist-border-style);
}

/* Responsive text sizes for headings */
@media screen and (max-width: 768px) {
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2, .section-title { font-size: 2rem; }
    .subtitle.is-4 { font-size: 1.25rem; }

    #hero .title.is-1 { font-size: 2.8rem; }
    #hero .subtitle.is-4 { font-size: 1.2rem; }

    .pricing-card.is-featured {
        transform: scale(1); /* No scale on mobile to save space */
    }
    .pricing-card.is-featured:hover {
        transform: translateY(-3px) translateX(-3px); /* Only hover transform */
    }

    .footer {
        text-align: center;
    }
    .footer .columns {
        flex-direction: column;
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
}

.navbar-item img{
    max-width: 4rem;
}

.title:not(.is-spaced)+.subtitle{
    margin: 0;
}

.button{
    white-space: break-spaces;
    height: auto;
}

.card .card-image figure img{
    height: 300px;
}

.hero-video, .image.is-16by9 .has-ratio, .image.is-16by9 img, .image.is-1by1 .has-ratio, .image.is-1by1 img, .image.is-1by2 .has-ratio, .image.is-1by2 img, .image.is-1by3 .has-ratio, .image.is-1by3 img, .image.is-2by1 .has-ratio, .image.is-2by1 img, .image.is-2by3 .has-ratio, .image.is-2by3 img, .image.is-3by1 .has-ratio, .image.is-3by1 img, .image.is-3by2 .has-ratio, .image.is-3by2 img, .image.is-3by4 .has-ratio, .image.is-3by4 img, .image.is-3by5 .has-ratio, .image.is-3by5 img, .image.is-4by3 .has-ratio, .image.is-4by3 img, .image.is-4by5 .has-ratio, .image.is-4by5 img, .image.is-5by3 .has-ratio, .image.is-5by3 img, .image.is-5by4 .has-ratio, .image.is-5by4 img, .image.is-9by16 .has-ratio, .image.is-9by16 img, .image.is-square .has-ratio, .image.is-square img, .is-overlay, .modal, .modal-background{
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.image.is-4by3{
    padding-top: 0;
}

.instructor-card .card-image figure.is-1by1{
    all: unset;
}