body.block-editor-page .package-card {
    pointer-events: none;
}
body.block-editor-page .package-list .package-list-sidebar .package-list-sidebar__actions {
    pointer-events: none;
}

.package-list {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: grid;
    box-sizing: border-box;
    
    * {
        box-sizing: border-box;
    }

	@media (min-width: 960px) {
		grid-template-columns: 300px 1fr;
		column-gap: 48px;
		align-items: start;
	}

    .package-list-sidebar {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 100%;
        background-color: #f6f6f6;
        border-radius: 8px;
        padding: 0 32px;

        form {
            position: sticky;
            top: 0;
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-height: 100%;
            padding: 32px 0;

            input, select, textarea {
                width: 100%;
                padding: 0.5em;
            }

            input[type="range"] {
                padding: 0;
            }

            label {
                margin-bottom: 8px;
            }
        }

        .package-list-sidebar__actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;
            text-align: center;

            button {
                flex: 1;
            }

            .wp-block-button {
                .wp-block-button__link {
                    width: 100%;
                    cursor: pointer;
                }
            }

            a {
                font-size: var(--wp--preset--font-size--small);
                opacity: 0.8;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

    }

    .package-list-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .no-packages {
        text-align: center;
        padding: 56px 48px;
		min-height: 340px;
        background-color: #f9f9f9;
        border-radius: 8px;
        display: grid;
        place-content: center;
    }

	.package-card {
		--card-space: var(--wp--preset--spacing--50);

		position: relative;
		width: 100%;
		height: 100%;
		display: grid;
		gap: 0;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		cursor: pointer;

		&.is-offsale,
		&.is-unavailable,
		&.is-soldout {
			display: grid;
			grid-template-rows: auto 1fr;

			button {
				opacity: 0.7;
				background-color: #6c757d;
				border-color: #6c757d;
				color: #fff;
				pointer-events: none;
			}
		}
		
		a {
			display: grid;
			grid-template-rows: auto 1fr;
			text-decoration: none;
			&:hover {
				.package-card__media:after {
					opacity: 0.7;
				}
			}
		}

		.package-card__media {
			position: relative;
			overflow: hidden;
			width: 100%;
			aspect-ratio: 16 / 9;
			background-color: var(--wp--preset--color--secondary);

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;				
			}

			&:after {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: var(--wp--preset--color--primary);
				opacity: 0;
				pointer-events: none;
				z-index: 1;
				transition: opacity 0.2s ease-out;
			}
		}

		.package-card__classes {
			position: absolute;
			bottom: 16px;
			left: 16px;
			display: flex;
			flex-direction: row;
			gap: 8px;
			align-items: center;
			font-size: 12px;
			color: white;
			background-color: rgba(0, 0, 0, 0.6);
			border-radius: 6em;
			padding: 4px 12px 4px 8px;

			svg {
				width: 14px;
				height: 14px;
			}
		}

		.package-card__content {
			position: relative;
			background-color: var(--wp--preset--color--base);
			padding: 14px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: calc(var(--card-space) / 2) var(--card-space);
		}

		.package-card__header,
		.package-card__main {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 12px;
		}

		.package-card__main {
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 8px;
		}
		
		.package-card__title {
			font-weight: var(--wp--custom--font-weight--bold);
			font-size: 16px;
			line-height: 1.4;
		}

		.package-card__meta {
			opacity: 0.5;
			font-size: 13px;
		}

		.package-card__date {
			display: flex;
			flex-direction: column;
			gap: 2px;
			text-transform: uppercase;
			font-size: 12px;
			background: #f1f1f1;
			align-items: center;
			padding: 6px 10px;
			border-radius: 4px;
			line-height: 1;
			opacity: 1;	

			span:nth-child(2) {
				font-size: 22px;
				font-weight: bold;
				color: var(--wp--preset--color--primary);
			}
			span:nth-child(1) {
				font-size: 11px;
    			font-weight: bold;
			}
			span:nth-child(3) {
				font-weight: bold;
				font-size: 11px;
			}
		}

		.package-card__price {
			font-weight: bold;
			color: var(--wp--preset--color--secondary);
			opacity: 1;
			font-size: 16px;
		}

		.wp-block-button {
            .wp-block-button__link {
                width: 100%;
                cursor: pointer;
            }
		}		

	}    

}