/* ==========================================================================
   STARTER TEMPLATES
   ========================================================================== */

#gateway-popup,
#gateway-page {

    .catalog-frontpage *,
    .catalog-frontpage ::before,
    .catalog-frontpage ::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .catalog-frontpage {
        color: @primary_font_color;
        font-size: @primary_font_size;
        font-family: @primary_font_family;
        font-weight: @primary_font_weight;
        line-height: @primary_line_height;
        width: 100%;
    }

    .catalog-frontpage h1,
    .catalog-frontpage h2,
    .catalog-frontpage h3,
    .catalog-frontpage h4 {
        color: @heading_font_color;
        font-weight: @heading_font_weight;
        font-family: @heading_font_family;
        line-height: @heading_line_height;
    }

    .catalog-frontpage__hero-image img {
        max-width: 100%;
        height: auto;
    }

    .catalog-frontpage__section {
        margin: 1.75rem 0 0 0;
    }

    .catalog-frontpage__section-heading {
        background: #46505e;
        color: #ffffff;
        display: flex;
        padding: 0.5rem;
        text-indent: 5px;
        margin: 1.75rem 0 0 0;
    }

    .catalog-frontpage__section-heading h1,
    .catalog-frontpage__section-heading h2,
    .catalog-frontpage__section-heading h3,
    .catalog-frontpage__section-heading h4,
    .catalog-frontpage__section-heading h5 {
        color: #ffffff;
        padding: .5rem 0;
        margin: 0;
        text-indent: 10px;
    }

    .catalog-frontpage__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1.75rem 0;
    }

    @media (min-width: 768px) {
	    .catalog-frontpage__grid {
			grid-template-columns: repeat(2, 1fr);
	    }
	}


    @media (min-width: 1024px) {
      .catalog-frontpage__grid {
        grid-template-columns: repeat(4, 1fr); /* Three columns for desktops */
      }
    }


    .catalog-frontpage__grid-item {
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.075), 0 2px 4px -2px rgba(0, 0, 0, .075);
        color: inherit;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        padding: 1rem;
    }

    .catalog-frontpage__grid-item h4 {
        font-weight: 500;
    }

    .catalog-frontpage__grid-item p {
        margin-bottom: 1rem;
        word-wrap: break-word;
/*        max-height: 150px;*/
        overflow: auto;
    }

    .catalog-frontpage__grid-item a {
        align-items: center;
        color: inherit;
        display: inline-flex;
        font-weight: inherit;
        gap: 0.375rem;
        text-decoration: inherit;
    }

    .catalog-frontpage__grid-item a:hover {
        color: inherit;
    }

    .catalog-frontpage__icon-header {
        font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
        font-style: normal;
        font-weight: 900;
        display: flex;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .catalog-frontpage__icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #46505e;
        color: #fff;
        font-size: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .catalog-frontpage__button-bar {
        margin: 1rem auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .catalog-frontpage__button-bar a {
        padding: 1em;
        font-size: 0.9em;
        text-decoration: none;
        flex-grow: 1;
        text-align: center;
        align-content: center;    
    }

    .catalog-frontpage__button-bar a:nth-child(odd) {
        background: #ffc600;
        color: black !important;
    }

    .catalog-frontpage__button-bar a:nth-child(even) {
        background: #234129;
        color: white !important;
    }
}